著 


四 


民 邮 电 出 版 社 


POSTS & 


< 
SS 





IN ACTION 


( Mark Tielens Thomas ) 
任 发 科 陈 伟 蒋 峰 皂 钢 详 





马克 蒂 伦 斯 托马斯 


icce hi 


"Nyy 





Pe s 
~ 
CE Swinenduiss se 


A. 
-eveny 


Sa Vre: sereyeprges . 








React 实 


React 的 设计 初 囊 就是， 帮助 开发 者 为 用 户 提供 令 人 惊叹 的 用 户 体 
念 。 每 位 开发 者 都 可 以 使 用 React 这 个 强大 的 工具 ! 管理 状态 、 数 据 流 
和 泻 染 的 巧妙 设计 是 成 功 的 关键 ， 只 有 这 样 设计 的 应 用 才能 运行 顺畅 、 
让 人 记忆 犹 新 。 开 发 者 只 要 进入 这 个 由 组 件 和 库 构 成 的 极其 丰富 的 生态 
系统 , 就 可 以 掌握 构建 让 开发 者 和 用 户 都 赏心悦目 的 Web 应 用 的 秘诀 。 


本 书 指导 读者 像 专家 一 样 思 考 用 户 界 面 ( UI ) ， 并 教 读 者 用 React 
构建 它们 。 本 书 非常 实用 ， 配 有 很 多 可 实际 操作 的 示例 ， 让 读者 快速 
上 手 。 本 书 的 目标 是 让 读者 掌握 泻 染 、 生命 周期 方法 、JSX、 数据 流 、 
表单 、 路 由 、 与 第 三 方 库 集成 和 测试 等 核心 概念 ， 并 且 帮 助 读者 利用 
书 中 介绍 的 应 用 设计 理念 推动 应 用 的 流行 。 在 学 习 将 React 集成 到 全 
栈 应 用 的 过 程 中 ， 读 者 还 可 以 探索 通过 Redux 进行 状态 管理 和 服务 
器 新 泻 染 ， 甚 至 可 以 接触 到 用 于 移动 UI 的 React Native。 


本 书 主要 内 容 


从 头 开始 使 用 React。 

用 组 件 实现 路 由 系统 。 

人 在 Node.js 中 进行 服务 器 端 泻 > 
使 用 第 三 方 库 。 

测试 React 组 件 。 


本 书 专门 写 给 熟悉 HTML、CSS 和 JavaScript 的 开发 者 。 


马克 幕 伦 斯 托马斯 ( Mark Tielens Thomas ) 是 一 位 经 验 丰 富 
的 软件 工程 师 ， 他 每 天 都 在 用 React、JavaScript 和 Node.js 工作 。 
他 喜爱 整洁 的 代码 、 优 美的 系统 和 上 好 的 咖啡 。 
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“ 读 这 本 书 。 使 用 React。 勇 往 直 
前 。” 
一 一 Michal Paszkiewicz， 伦 敦 交 通 局 


“一 站 式 一 一 既 有 概念 又 结 
示例 。” 


一 一 Phaneendra Bommareddy, Openlogix 


合 了 真实 


“每 一 位 想 用 React 和 Redux 创建 
应 用 程序 的 人 都 应 该 阅读 的 好 书 。” 


Andrew Courter ，Pivotal 





易于 理解 ， 清 晰 地 演示 了 所 有 必要 
的 步 又， 包括 大 量 代码 示例 ， 而 且 绝 
“会 让 读者 陷入 黑暗， 


一 一 Olivier Ducatteeuw， 和 鲁 汶 大 学 
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内 容 提要 


本 书 涵盖 了 构建 React 应 用 所 涉及 的 概念 和 API， 全 书 共 13 章 ， 分 为 3 个 部 分 ， 从 React 
的 核心 思想 和 关键 点 讲 起 , 并 随 着 进展 涉及 更 具体 和 高 级 的 主题 。 首 先 介绍 React 的 核心 思想 ， 
探讨 了 React 的 一 些 关 键 点 ， 展 示 React 如 何 适 应 使 用 者 的 开发 过 程 ; 然后 开始 深入 React， 摘 
述 数据 如 何在 React 中 流动 ， 介 绍 组 件 生命 周期 API， 开 始 构建 Letters Social 示例 项 目 ， 处 理 
表单 以 及 路 由 的 关键 部 分 ; 最 后 将 注意 力 专 门 放 在 把 应 用 转换 到 使 用 Redux， 介绍 Redux 状态 
管理 方案 ， 探 索 服务 硕 端 泻 染 ， 并 简要 地 介绍 React Native 项 目 。 

本 书 结构 清晰 ， 内 容 由 浅 和 人 深 ， 适合 任何 对 React 感 兴趣 ， 想 学 习 React 的 读者 ， 也 适合 前 
端 开 发 人 和 群 。 


详 者 人 向 介 


任 发 科 ” 火 币 网 高 级 研发 总 监 ， 曾 任职 亚马逊 、 唯 品 会 等 多 家 互联 网 公司 ,担任 研发 和 技术 
管理 工作 ， 有 丰富 的 软件 架构 、 开 发 和 管理 经 验 。 个 人 长 期 从 事 和 关注 高 效 研发 组 织 的 构建 和 管 
理 ， 并 有 丰富 的 团队 管理 实践 。 近 年 来 主要 关注 和 从 事 研发 效能 、DevOps 体系 的 建立 ， 目 前 从 
事 稳定 性 工程 的 相关 工作 。 

陈 伟 哗啦 啦 前 端 织 构 师 ， 曾 在 唯 品 会 、 火 币 等 公司 任 前 端 工 程 师 和 前 端 架 构 师 。 对 
JavaScript 语言 以 及 Node.js、Vue、React 等 前 冰 框 如 有 这 入 理解, 并 在 前 冰 组 件 化 方向 有 深入 的 工 
程 化 研究 。 目 前 致力 于 可 视 化 的 页 面 编辑 需 的 设计 和 开发 ， 赋 能 产品 与 前 端 ， 提 升 公司 开发 效率 。 

将 峰 火 币 网 资深 前 端 工程 师 ， 曾 就 职 于 国家 农业 信息 化 中 心 、 阿 里 健康 、 融 数 金 服 等 从 
事 软件 研发 、 基 础 架构 等 工作 ,目前 主要 负责 火 币 网 前 端 相关 产品 研发 管理 工作 。 早 年 间 致 力 于 
微软 .NET 框 以 人 研发， 近年 来 专注 于 前 端 研发 体系 架构 ， 有 大 量 的 C#、Node.js 和 JavaScript 项 目 
开发 经 验 , 对 Electron 跨 平 台 应 用 有 极 大 的 兴趣 与 研究 。 目 前 正在 积极 推进 企业 内 中 后 台 微 前 端 
应 用 方案 的 验证 与 实施 。 

抒 阐 现 就 职 于 哗啦 啦 研 发 中 心 , 曾 就 职 于 作业 盒子 、 融 数 金 服 、 火 币 网 等 从 事 软件 人 研发 
工作 ,目前 主要 负责 数据 可 视 化 基础 组 件 研 发 。 对 图 表 绘 制 、 图 表 交 互 、 数 据 建 模 与 分 析 等 相关 
内 容 有 极 大 兴趣 。 目 前 致力 于 提供 展现 更 准确 、 分 析 更 高 效 的 数据 可 视 化 工具 研发 。 


前 总 


当 我 最 初 开 始 学 习 和 使 用 React 的 时 候 ，JavaScript 社区 刚 开 始 从 一 个 快速 创新 和 颠覆 的 周 
期 安定 下 来 。React 正 变 得 很 流行 ， 而 JavaScript 社区 在 诸多 方面 仍旧 像 《 狂 时 西部》 一 样 。 我 
对 React 这 一 技术 感到 兴奋 ， 因 为 它 展现 出 真正 的 希望 。 心 智 模 型 似乎 很 可 靠 ， 组 件 让 构建 UI 
变 得 更 简单 ，API 灵活 且 富 于 表达 性 ， 整 个 项 目 看 起 来 “恰到好处 ”。 暂 且 不 提 API 外 观 、 可 用 
性 和 理论 基础 ， 还 有 一 个 事实 就 是 ， 对 我 来 说 React 真 的 很 酷 ， 而 且 我 喜欢 用 它 。 

目 那 时 起 ,已 经 发 生 了 很 多 变化 一 一 与 此 同时 ， 有 些 方 面 并 没有 太 多 改变 。React 的 基本 概 
念 和 API 基本 保持 不 变 , 但 已 经 涌现 和 演化 出 一 套 知识 和 最 佳 实践 ， 而 且 有 更 多 的 人 在 使 用 它 。 
一 个 由 库 和 相关 技术 组 成 的 开源 生态 正 蓬 描 发 展 。 会 议 、 聚 会 和 社区 或 多 或 少 都 会 涉及 React。 
React 核心 团队 在 React 的 版 本 16 重 写 了 React 内 部 架构 ， 它 既 保 持 了 癌 后 兼容 又 为 未 来 的 大 量 
创新 铺 平 道路。 所 有 这 些 “ 没 有 太 大 变化 的 改变 ”都 指 问 我 所 认为 的 React 的 最 大 优势 之 一 : 

维持 稳定 性 和 创新 之 间 的 紧张 关系 ， 在 不 让 人 望尘莫及 的 情况 下 推动 采用 。 

鉴于 以 上 原因 ，React 持续 占据 技术 主导 地 位 而 且 只 会 变 得 更 加 流行 。 许 多 大 公司 、 无 数 的 
创业 公司 以 及 其 他 各 类 公司 都 在 以 某 种 方式 使 用 它 。 许 多 目前 没有 使 用 React 的 公司 正 尝 试 切 换 
到 React 来 将 它们 的 前 端 应 用 现代 化 。 

React 的 流行 发 展 并 未 拘 央 于 Web 一 一 它 还 问 其 他 平台 进军 。React Native，React 在 移动 平 
台 的 港口 ， 也 成 为 一 项 重大 创新 。 它 展示 了 React 的 “一 次 学 习 ， 到 处 编写 ”的 方法 。 将 React 
作为 平台 的 想法 意味 着 不 要 局 限于 将 其 用 于 基于 浏览 器 的 应 用 。 

让 我 们 忘记 对 React 的 大 肆 宣 传 并 聚焦 于 本 书 应 该 为 读者 做 什么 。 我 对 本 书 的 主要 期 望 是 
它 能 帮助 读者 有 效 地 理解 和 使 用 React， 它 甚至 可 以 让 读者 更 好 地 全 面 构建 用 户 界 面 ， 即 使 一 
点 点 。 我 无 意 参 与 流行 词 豫 动 的 开发 或 推动 恋 者 转向 “和 魔法” 技术， 相反 ， 我 将 赌注 压 在 健壮 
的 心智 模型 以 及 结合 实际 例子 的 深入 理解 会 让 读者 用 React 做 不 可 思议 的 事情 ， 无 论 目 己 做 还 
是 和 别人 一 起 。 





Mark Tielens Thomas 是 一 位 全 栈 软件 工程 师 和 作者 .他 和 他 妻子 在 再 加 州 生 
活 和 工作 。Mark 喜欢 解决 大 规模 工程 问题 并 带领 团队 交付 高 影响 力 、 高 价值 的 
解决 方案 。 他 深 爱 上 好 的 咖啡 、 很 多 书 、 快 速 的 API 以 及 漂亮 的 系统 。 他 为 
Manning 出 版 社 写 作 并 在 个 人 博客 上 创作 。 





资源 与 支持 


本 书 由 异步 社区 出 品 ， 社 区 ( https://www.epubit.com/ ) 为 您 提供 相关 资源 和 后 续 服务 。 
屿 套 资源 


本 书 提供 本 书 源 代码 ， 要 获得 这 一 配套 资源 ， 请 在 异步 社区 本 书页 面 中 点 击 故 之 是， 跳 转 
到 下 载 界 面 ， 按 提示 进行 操作 即 可 。 注 意 : 为 保证 购书 读者 的 权益 ,该 操作 会 给 出 相关 提示 ， 要 
求 输入 提取 码 进行 验证 。 

如 来 您 是 教师 ,希望 获得 教学 配套 资源 ， 请 在 社区 本 书页 面 中 直接 联系 本 书 的 责任 编辑 。 


提交 勘误 

作者 和 编辑 尽 最 大 努力 来 确保 书 中 内 容 的 准确 性 ,但 难免 会 存在 政 漏 。 欢迎 您 将 发 现 的 
问题 反馈 给 我 们 ， 帮 助 我 们 提升 图 书 的 质量 。 

当 您 发 现 错误 时 ， 请 登录 异步 社区 ， 按 书 名 搜索 ， 进 入 本 书页 面 ， 点 击 “ 提 交 勘 误 ”, 输入 其 


误 人 信息， 点击“ 提交” 按钮 即 可 。 本 书 的 作者 和 编辑 会 对 您 提交 的 勘误 进行 审核 ， 确 认 并 接受 后 ， 
您 将 获 赠 异步 社区 的 100 积分 。 积 分 可 用 于 在 异步 社区 兑换 优惠 券 、 样 书 或 奖品 。 


详细 信息 与 书评 择 交 勘 恬 


页 内 位 置 ( 行 数 ) : | 


二- (二 





2 资源 与 支持 
扫 码 关注 本 书 


扫描 下 方 二 维 码 ， 您 将 会 在 异步 社区 微 信 服务 号 中 看 到 本 书信 息 及 相关 的 服务 提示 。 





与 我 们 联系 


我 们 的 联系 邮箱 是 contact@@epubit.com.cn。 

如 果 您 对 本 书 有 任何 疑问 或 建议 , 请 您 发 邮件 给 我 们 ,并 请 在 邮件 标题 中 注 明 本 书 书 名 ， 以 
便 我 们 更 高 效 地 做 出 反馈 。 

如 果 您 有 兴趣 出 版 图 书 、 录 制 教学 视频 ， 或 者 参与 图 书 翻译 、 技 术 审 校 等 工作 ， 可 以 发 邮件 给 
我 们 ; 有 意 出 版 图 书 的 作者 也 可 以 到 异步 社区 在 线 投稿 ( 直接 访问 www.epubit.com/selfpublish/ 
submission 即 可 )。 

如 果 您 来 自学 校 、 培 训 机 构 或 企业 ， 想 批量 购买 本 书 或 异步 社区 出 版 的 其 他 图 书 , 也 可 以 发 
邮件 给 我 们 。 

如 果 您 在 网 上 发 现 有 针对 异步 社区 出 品 图 书 的 各 种 形式 的 盗版 行为 , 包括 对 图 书 全 部 或 
部 分 和 内容 的 非 授 权 传 播 ， 请 您 将 怀疑 有 侵权 行为 的 链接 发 邮件 给 我 们 。 您 的 这 一 举动 是 对 作 
者 权 区 的 保护 ， 也 是 我 们 持续 为 您 提供 有 价值 的 内 容 的 动力 之 源 。 


关于 异步 社区 和 异步 图 书 


“异步 社区 ”是 人 民 邮 电 出 版 社 旗下 IT 专业 图 书社 区 ， 致 力 于 出 版 精品 IT 技术 图 书 和 相关 学 习 
产品 ， 为 作 译 者 提供 优质 出 版 服务 。 异 步 社区 创办 于 2015 年 8 月 ， 提 供 大 量 精品 IT 技术 图 书 和 电 
子 书 ， 以 及 高 品质 技术 文章 和 视频 课程 。 更 多 详情 请 访问 异步 社区 官网 https://www.epubit.com。 

“异步 图 书 ” 是 由 异步 社区 编辑 团队 策划 出 版 的 精品 IT 专业 图 书 的 品牌 , 依托 于 人 民 邮 电 出 
版 社 近 30 年 的 计算 机 图 书 出 版 积累 和 专业 编辑 团队 , 相关 图 书 在 封面 上 印 有 异步 图 书 的 LOGO。 
异步 图 书 的 出 版 领域 包括 软件 开发 、 大 数据 、AI、 测 试 、 前 端 、 网 络 技术 等 。 








异步 社区 微 信 服务 号 


别 等 到 事情 完美 才 与 他 人 分 享 。 尽 时 展示， 频繁 展示 。 当 我 们 到 达 时 它 会 变 漂亮 ， 
但 沿途 并 非 如 此 。 
一 一 Ed Catmull, 《创新 公司 : 皮克斯 的 启示 》 


有 价值 的 努力 很 少 是 独立 完成 的 , 但 许多 情况 下 , 成 功 却 完全 归于 一 个 人 或 几 个 人 , 这 种 将 
功劳 归于 少数 人 的 方式 掩盖 了 致力 于 最 终 目的 的 更 大 的 贡献 者 网 络 。 那 些 声 称 “ 独 目 完 成 ”的 人 
稼 党 没有 意识 到 其 他 人 帮助 他 们 的 方式 ， 无 论 通 过 示范 帮助 他 们 还 是 通过 指示 帮助 他 们 。 另 外 ， 
他 们 也 没有 意识 到 在 社区 中 工作 的 力量 会 推动 其 获得 更 为 难以 企及 的 成 功 和 旱 越 。 独自 工作 意味 
着 受 限 于 个 人 (并且 只 有 个 人 ) 能 做 什么 ， 合 作 却 可 以 通过 让 我 们 属 开 心胸 接受 谦虚 、 新 想法 、 
不 同 视角 和 无 价 的 反馈 来 提供 一 条 通 往日 越 的 道路 。 

我 不 会 轧 奏 到 认为 这 本 书 是 我 一 个 人 写 的 , 哪怕 这 种 想法 只 有 一 秒 。 我 的 手指 敲 击 了 键盘 , 我 
的 名 字 出 现在 封面 上 , 但 那 并 不 意味 着 这 是 个 人 秀 。 不 ,就 像 我 生命 中 所 有 让 我 感恩 的 东西 ， 这 
本 书 是 由 一 群 聪明 、 谦 和 进 和 有 爱心 的 人 所 组 成 的 丰富 多 彩 的 社区 的 结果 ， 他 们 愿意 对 我 付出 耐心 、 
善意 ， 有 时 还 有 严 订 。 

首先 ， 我 要 感谢 我 的 妻子 Haley。 她 是 我 的 开心 果 、 我 最 好 的 朋友 、 我 的 创作 伙伴 。 她 已 经 
为 这 本 书 忍 受 了 很 长 时 间 。 深 夜 ， 更 多 深夜 ,没完 没 了 地 讨论 这 本 书 。 她 这 位 才华 横 洲 的 优秀 作 
家 在 我 遇 到 写作 障碍 时 帮助 我 ， 在 我 感觉 成 书 无 望 时 鼓励 我 。 她 始终 如 一 地 爱 和 祈祷 ， 总 是 在 我 
低谷 时 抚慰 我 , 在 我 自我 怀疑 时 质疑 我 , 在 欢乐 时 与 我 一 同 分 享 。 她 在 整个 过 程 中 一 直 非 常 出 色 ， 
我 迫不及待 地 想 要 报答 她 ， 在 她 未 来 想 写 的 许多 书 上 帮助 她 。 我 会 一 直 无 限 地 感激 她 。 

我 还 要 感谢 在 这 个 过 程 中 文 持 我 的 我 生命 中 的 其 他 人 。 我 真诚 地 感谢 拥有 这 样 一 个 美妙 的 
家 庭 。 我 妈 我 爸 一 一 Annmarie 和 Mitchell 一 一 在 我 编写 本 书 的 过 程 中 (以 及 我 整个 生命 中 ) 一 
直 鼓 励 我 ， 他 们 还 承诺 完整 地 该 这 本 书 ， 虽 然 我 不 会 强迫 他 们 这 么 做 。 我 两 个 哥哥 一 一 David 
和 Peter 一 一 也 一 下 文 持 和 或 励 我 ， 他 们 没有 承诺 读 这 本 书 ， 但 我 会 在 接 下 来 的 一 年 里 (或 者 不 
管 多 长 时 间 ) 大 声 读 给 他 们 听 。 我 的 那些 教 友 、 玩 伴 和 工友 也 一 直 非 常 热 心地 帮助 我 他们 帮 了 











2 致谢 


很 大 的 忙 ， 一 直通 过 追问 “ 写 完 了 没 ? ”来 激励 我 ， 而 且 容 忍 我 对 React 的 解释 。 我 还 要 感谢 我 
的 教授 ， 特 别 是 Diana Pavlac Glyer 博士 ， 她 教 我 如 何 思考 和 写作 。 

Manning 出 版 社 的 工作 人 员 在 我 写作 的 过 程 中 提供 了 很 多 帮助 。 我 要 特别 感谢 Marina Michaels 
(开发 编辑 )、Nickie Bruckner ( 技术 开发 编辑 ) 和 German Frigerio ( 技术 检验 员 )， 他 们 花 了 无 数 
小 时 阅读 和 帮助 我 写作 。 没 有 他 们 就 不 会 有 这 本 书 。 我 还 要 感谢 Brian Sawyer 联系 我 写 这 本 书 以 
及 Marjan Bace 最 初 给 我 写 这 本 书 的 机 会 。Manning 出 版 社 的 每 个 人 都 致力 于 帮助 世界 各 地 的 人 
们 以 有 效 的 方式 学 习 有 影响 力 的 重要 技能 和 概念 ， 我 坚信 并 很 高 兴 能 帮助 进一步 履行 Manning 
出 版 社 的 教育 使 命 。 


关于 本 书 


这 是 一 本 关于 React 的 书 ，React 是 构建 Web 用 户 界 面 的 库 。 本 书 涵 盖 了 构建 React 应 用 所 
涉及 的 概念 和 API。 读 者 将 会 在 阅读 本 书 的 过 程 中 使 用 React 构建 一 个 示例 社交 网 络 应 用 。 这 个 
应 用 将 涉及 各 种 主题 ， 从 添加 动态 数据 到 服务 天 冰 泻 染 。 


目标 读者 


本 书 是 为 那些 想 要 学 习 React 的 人 写 的 ,无 论 是 软件 工程 师 、 工 程 副 总 裁 、 首 席 技术 官 
( CTO )、 设 计 师 、 工 程 经 理 、 大 学 或 编程 训练 营 的 学 生 ， 还 是 其 他 对 React 感 兴趣 的 人 ， 都 适合 
阅读 。 读 者 可 以 根据 自己 的 需要 , 将 注意 力 集中 在 本 书 的 不 同 部 分 。 我 在 本 书 的 第 一 部 分 先 介 绍 
React， 并 随 着 学 习 进 展 涉 及 更 具体 和 高 级 的 主题 。 

如 果 读 者 对 JavaScript 有 一 定 了 解 ， 会 有 更 好 的 阅读 体验 。 本 书 大量 使 用 了 JavaScript， 但 不 是 一 本 
关于 JavaScript 的 书 。 我 不 会 涉及 JavaScript 的 基本 概念 , 但 如 果 它 们 与 React 的 讨论 相关 ， 我 会 稍 加 涉 
及 。 如 果 读 者 对 JavaScript 基本 熟练 并 理解 如 何 通过 JavaScript 进行 异步 编程 ， 那 么 应 该 能 够 通读 示例 。 

本 书 还 假定 读者 已 经 从 技术 角度 了 解构 建 前 端 Web 应 用 的 一 些 基 础 知识 一 一 了 解 基本 浏览 
做 API 会 很 有 帮助 。 我 们 将 使 用 Fetch API 这 样 的 东西 进行 网 络 请 求 、 设 置 和 读 取 cookie， 人 处 理 
用 户 事件 (按键 、 点 击 等 )， 我 们 还 会 与 库 打 交道 ( 尽管 不 是 非常 多 )。 熟 悉 现代 前 端 应 用 的 基本 
知识 会 帮助 读者 最 大 限度 地 利用 本 书 。 

幸运 的 是 ， 我 已 经 将 所 有 围绕 工具 和 构建 过 程 (这 也 是 构建 现代 Web 应 用 的 必要 部 分 ) 的 
复杂 性 抽象 出 来 。 项 目的 源 代码 包含 了 所 有 依赖 和 构建 工具 ,因此 读者 应 该 不 必 为 了 阅读 本 书 而 





去 理解 Webpack 和 Babel 是 如 何 工作 的 。 总 而 言 之 ， 读 者 应 该 至 少 基本 熟练 JavaScript 和 一 些 前 
端 Web 应 用 概念 才能 充分 享受 阅读 本 书 的 乐趣 。 
路 线 图 


本 书 共 13 章 ， 分 为 3 个 部 分 。 


2 关于 本 书 


第 一 部 分 介绍 React。 第 1 章 先 介绍 React 的 核心 思想 。 它 探讨 React 的 一 些 关键 点 ， 展 示 
React 如 何 适应 使 用 者 的 开发 过 程 ， 看 看 React 能 做 什么 以 及 不 能 做 什么 。 第 2 章 是 “展示 代码 ” 
的 章 。 我 将 市 领 读 者 钻研 React API 并 用 React 组 件 构 建 一 个 示例 评论 框 。 

第 二 部 分 开始 深入 React。 读 者 将 在 第 3 章 看 到 数据 如 何在 React 中 流动 ， 了 解 组 件 生命 周 
期 API， 并 在 第 4 章 开 始 构建 Letters Social 示例 项 目 。 这 个 项 目 将 贯穿 本 书 的 剩余 部 分 。 第 4 章 
会 介绍 从 应 用 源 代码 设置 项 目 ， 并 解释 本 书 的 剩余 部 分 如 何 使 用 它 。 第 5 章 到 第 9 章 更 深入 介绍 
React。 第 5 章 涉及 表单 处 理 ， 并 教会 读者 用 另 一 种 方式 来 处 理 React 中 的 数据 和 数据 流 。 第 6 章 延 
续 相 同 的 思路 并 基于 第 5 章 的 工作 成 果 构 建 更 复杂 的 React 地 图 展示 组 件 。 第 7 章 和 第 8 章 处 理 
路 由 这 一 几乎 所 有 现代 前 端 应 用 的 关键 部 分 。 读 者 将 从 头 构建 一 个 路 由 器 并 设置 应 用 处 理 多 个 页 
面 。 第 8 章 继续 介绍 路 由 ， 并 与 Firebase 平台 进行 集成 ， 以 便 能 够 对 用 户 进行 身份 验证 。 最 后 ， 
第 9 章 介绍 React 应 用 和 组 件 的 测试 。 

第 三 部 分 涉及 更 高 级 的 React 主题 ， 并 将 注意 力 专 门 放 在 把 应 用 转换 为 使 用 Redux。 第 10 
划 和 第 11 章 介绍 Redux 这 个 状态 管理 方案 。 将 应 用 转换 为 使 用 Redux 之 后 ， 我 们 将 在 第 12 章 
探索 服务 顺 端 泻 染 。 这 一 章 还 涉及 将 自 建 路 由 器 转换 为 React Router。 第 13 章 会 简要 地 介绍 React 
Native, 为 一 个 React 项 目 , 这 一 项 目 允 许 开 发 人 员 为 移动 设备 (iOS 和 Android ) 编写 JavaScript 
React 应 用 。 


关于 代码 


本 书 使 用 两 组 主要 的 源 代码 。 对 于 前 两 章 , 读者 将 处 理 项 目 代 码 库 之 外 的 代码 。 读 者 将 能 够 
在 CodeSandbox 这 个 在 线 代 码 平台 上 运行 这 些 代码 示例 。 该 平台 负责 打包 代码 并 实时 运行 , 因此 
读者 不 必 操 心 搭建 构建 过 程 。 

第 4 章 将 搭建 项 目 源 代 码 。 这 些 源 代码 可 以 从 出 版 社 网 站 及 以 React in Action 命名 的 本 书 
GitHub 仓库 上 下 载 ， 项 目 最 终结 果 运 行 在 https://social.react.sh。 每 章 或 者 每 几 章 有 自己 的 Git 分 
文 ， 读 者 可 以 轻松 地 切换 到 后 续 章 或 者 跟随 本 书 的 项 目 进程 。 所 有 源 代码 都 在 GitHub 上 ， 欢 迎 
读者 随时 在 GitHub 上 提问 。 

应 用 的 JavaScript 都 使 用 Prettier 进行 格式 化 ， 用 最 新 的 ECMAScript 规范 ( 本 书 编写 时 是 
ES2017 ) 编写 。Prettier 使 用 该 规范 中 的 概念 、 语 法 和 方法 。 项 目 包含 了 ESLint 配置 ， 但 如 果 读 
者 想 修改 它 以 适应 自己 的 需要 ， 请 随意 。 


软件 和 硬件 要 求 
本 书 没有 严格 的 硬件 要 求 。 读 者 可 以 自由 使 用 任何 类 型 的 计算 机 ( 物理 机 或 是 像 Cloud9 这 


样 的 虚拟 机 提供 者 )， 但 我 不 会 解决 开发 环境 差异 所 造成 的 不 一 致 问题 。 如 果 问 题 出 现在 单独 的 
包 中 ， 这 些 包 的 代码 库 或 Stack Overflow 是 寻求 帮助 的 最 好 选择 。 


关于 本 书 3 


至 于 软件 ， 下 面 是 一 些 要 求 和 建议 。 

国 ”示例 项 目的 构建 过 程 使 用 Node.js， 因 此 需要 安装 最 新 的 稳定 版 。 查 看 第 4 章 了 解 更 多 
Node.js 搭建 的 信息 。 

加 ”还 需要 一 个 文本 编辑 融和 Web 浏览 右 ， 建 议 使 用 Visual Studio Code 、Atom 和 Sublime Text。 

加 将 使 用 Chrome 作为 本 书 的 主要 浏览 器 ， 特 别 是 它 的 开发 者 工具 。 


关于 封面 插图 


本 书 封 面 插图 的 标题 为 The Capitan Pasha, Derya Bey, admiral of the Turkish navy。Pasha 上 尉 
是 奥斯曼 帝国 海军 的 最 高 指挥 官 。 这 幅 画 取 自 奥斯曼 带 国 的 套 沪 合集 ， 由 伦敦 老 邦 德 街 ( Old Bond 
Street ) 的 William Miller 在 1802 年 1 月 1 日 出 版 。 该 合集 的 标题 页 已 遗失 ， 我们 无 法 奶 查 到 它 
的 日 期 。 书 的 目录 用 英语 和 法 语 标识 出 这 些 图 , 每 幅 插图 上 都 有 两 位 创作 这 幅 插 画 的 艺术 家 的 名 
字 ， 如 果 他 们 发 现 自己 的 艺术 品 出 现在 200 年 后 的 计算 机 书籍 的 封面 上 ,这 无 疑问 ， 他 们 一 定 会 
感到 吃惊 。 

Manning 出 版 社 的 一 位 编辑 在 麦 哈 顿 西 26 街 “Garage” 的 古董 跳蚤 市 场 购买 了 这 个 合 
卖家 是 一 位 驻 土耳其 安卡拉 的 美国 人 ,交易 发 生 时 他 正在 收拾 挫 位 。Manning 出 版 社 的 编辑 没有 
带 够 购买 所 需 的 大 量 现金 ， 而 信用 卡 和 支票 都 被 礼貌 地 拒绝 了 。 由 于 卖家 当晚 要 飞 回 安卡拉 , 情 
况 变 得 越 来 越 没 有 希望 。 怎么 办 ?结果 是 达成 了 以 握手 保证 的 老式 口 尖 协议。 卖家 简单 地 建议 把 
钱 汇 给 他 ， 而 编辑 走时 带 着 一 张 写 有 银行 信息 的 纸 以 及 夹 在 腋 下 的 一 组 画 。 不 用 说 , 我们 第 二 天 
就 转 了 钱 ， 我们 仍 对 这 位 不 知名 的 人 对 我 们 中 的 一 员 保 有 的 信任 心 存 感激 ， 并 对 他 印象 深刻 。 这 
幅 画 让 人 回忆 起 发 生 在 很 久之 前 的 事情 。 

我 们 在 Manning 出 版 社 赞美 基于 两 个 世纪 前 丰富 多 彩 的 地 域 生活 的 书籍 封面 的 创作 性 、 首 创 
性 ， 以 及 计算 机 业务 的 乐趣 ， 这 些 生活 从 这 些 图 片 中 恢复 生机 。 
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初 识 React 


如 果 你 近 两 年 开发 过 前 端 JavaScript 应 用 , 可 能 已 经 听 说 过 React 了 。 即使 你 刚刚 
接触 用 户 界 面 构建 ， 可 能 也 已 经 听 说 过 它 了 。 就 算 这 是 第 一 次 听 说 React, 你 应 
该 也 已 经 接触 过 React: 有 很 多 非常 流行 的 应 用 使 用 了 React。 如 果 你 使 用 过 Facebook， 
观看 过 Netflix, 或 者 在 Khan 学 院 学 习 过 计算 机 科学 , 那 就 已 经 用 过 React 创建 的 应 用 了 。 

React 是 一 个 用 于 构建 用 户 界 面 的 库 。 它 由 Facebook 的 工程 师 创建 ， 目 其 发 布 以 来 就 
在 JavaScript 社区 掀起 了 热潮。 过 去 几 年 中 ， 它 日 益 普 及 ， 成 为 很 多 团队 和 工程 师 构建 动 
态 用 户 界 面 的 首选 工具 。 实 际 上 ，React 的 API、 思 维 模型 和 活跃 的 社区 结合 在 一 起 ， 已 
经 将 React 的 开发 惠 到 了 其 他 平台 ， 包 括 移 动 端 甚至 虚拟 现实 。 

本 书 将 探索 React， 看 看 它 成 为 如 此 成 功 且 有 用 的 开源 项 目 原因 何在 。 第 一 部 分 将 从 
头 开 始 学 习 React 的 基础 知识 。 由 于 构建 健壮 的 JavaScript UI 应 用 所 涉及 的 工具 可 能 非常 
复杂 ， 我 们 将 避免 陷 人 这 些 工 具 之 中 ， 并 专注 于 学 习 React API 的 方方面面 。 我 们 也 会 避 
免 “ 魔 法 ”， 并 致力 于 建立 对 React 及 其 工作 原理 的 具体 理解 。 

第 1 章 将 从 较 高 层次 学 习 React。 我 们 将 介绍 一 些 重 要 思想 ， 如 组 件 、 虚 拟 DOM， 以 
及 React 中 的 一 些 权衡 和 取舍 。 第 2 章 会 大 致 过 一 志 React 的 API， 并 通过 创建 一 个 简单 
的 评论 框 组 件 来 着 手 实践 React。 
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React 概述 


,就 团队 而 言 的 React 
使 用 React 的 一 些 权衡 





本 本 一 本 用 图 
jy 
CD 
所 
6 
党 


如 果 你 在 技术 行业 中 做 Web 工程 师 ， 可 能 听 说 过 React。 有 可 能 是 从 网 上 听 到 的 ， 如 Twitter 
或 Reddit。 可 能 是 朋友 或 同事 提 到 了 它 ， 又 或 者 是 在 一 次 聚会 上 听 到 了 有 关 它 的 讨论 。 无 论 是 在 
哪儿 , 我 敢 打赌 , 听 到 的 要 么 是 赞美 要 么 是 怀疑 。 大 部 分 人 对 React 这 样 的 技术 有 者 人 鲜明 的 观点 。 
有 影响 力 的 技术 往往 会 产生 这 样 的 效应 。 这 些 技术 流行 起 来 并 触及 更 广泛 的 受众 前 , 最 初 通常 只 
会 有 很 小 一 部 分 人 “了 解 它 "”。React 就 是 以 这 种 方式 开始 的 ， 但 现在 它 在 Web 工程 全 球 极 受 欢 
迎 并 被 广泛 使 用 。 它 的 流行 并 非 没有 原因 : 它 不 但 提供 了 很 多 东西 而 且 能 够 重新 激发 、 更 新 甚至 
转变 你 思考 和 构建 用 户 界 面 的 方式 。 
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React 是 一 个 用 于 构建 跨 平台 用 户 界 面 的 JavaScript 库 。React 给 予 开 发 者 强大 的 思维 模型 并 
帮助 开发 者 以 声明 式 和 组 件 驱 动 的 方式 构建 用 户 界 面 。 这 是 React 最 宽泛 和 最 简短 的 定义 ,我 们 
将 在 本 书 中 详细 解释 这 些 观点 。 

在 广阔 的 Web 工程 领域 中 , React 位 于 何 处 ? React 经 第 在 Vue、Preact、Angular、Ember、 
Webpack 、Redux 以 及 其 他 知名 JavaScript 库 和 框架 的 相同 领域 中 被 谈 及 。React 通常 是 前 端 
应 用 的 主要 部 分 并 且 与 我 们 刚刚 提 到 的 其 他 库 和 框架 拥有 类 似 的 特性 。 事 实 上 ， 相 比 以 往 ， 
许多 流行 的 前 端 技 术 现 在 都 与 React 莫名 地 类 似 。 曾 几何 时 ，React 的 做 法 是 新 闫 的 ， 而 其 他 
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技术 上 自 那 时 就 被 React 的 组 件 驱 动 、 声 明 式 做 法 所 影响 。React 持续 保持 “重新 思考 已 建立 的 
最 佳 实践 ”的 精神 ， 其 主要 目标 是 为 开发 人 员 提 供 一 种 富有 表现 力 的 思维 模型 和 一 种 高 性 能 
的 技术 来 构建 UI 应 用 。 
是 什么 使 得 React 的 思维 模型 如 此 强大 ? 这 是 因为 它 利 用 了 计算 机 科学 和 软件 工程 技 
术 的 深层 领域 。React 的 思维 模型 广泛 使 用 了 因数 式 和 面 问 对 象 编 程 的 概念 ， 并 重点 将 组 件 
作为 构建 的 主要 单元 。React 应 用 中 ， 开 发 人 员 可 以 用 组 件 创 建 用 户 界 面 。React 的 演 染 系 
统管 理 着 这 些 组 件 并 保持 着 应 用 视图 的 同步 。 组 件 通常 对 应 着 用 户 界 面 的 一 个 部 分 ， 如 日 
期 选择 大、 页 头 、 导 航 等 ， 但 它们 也 可 以 负责 客户 端 路 由 、 数 据 格 式 化 、 样 式 以 及 客户 端 
应 用 的 其 他 职能 。 
React 中 的 组 件 应 该 易于 理解 并 很 容易 与 其 他 React 组 件 集成 ; 它们 遵循 可 预测 的 生命 2 
期 ， 能 够 维护 目 己 的 内 部 状态 ， 并 与 “常规 Javascript” 兼 容 。 我 们 将 在 本 书 的 后 续 部 分 深 
探讨 这 些 理念 ， 但 目前 我 们 可 以 先 从 较 高 层次 来 看 看 它们 。 图 1-1 给 出 了 React 
“成 分 ”的 概览 。 
让 我 们 大 致 了 解 一 下 每 个 部 分 。 
图 组 件 一 一 封装 的 功能 单元 ， 它 是 React 的 主要 单元 。 它 们 利用 数据 ( 属性 和 状态 ) 将 
UI 演 染 为 输出 。 我们 将 在 第 2 章 及 之 后 的 各 章 中 探讨 React 组 件 处 理 数 据 的 方式 。 某 
些 类 型 的 React 组 件 也 提供 了 一 组 可 以 “ 挂 载 ” 的 生命 周期 方法 。 泻 染 过 程 ( 基于 数 
据 输 出 和 更 新 UI ) 在 React 中 是 可 预见 的 并 且 组件 可 以 使 用 React 的 API“ 挂 载 ” 到 
其 中 。 
国 React 库 React 使 用 一 组 核心 库 。React 库 的 核心 与 react-dom 和 react-native 
紧密 配合 ， 其 侧重 于 组 件 规范 和 定义 。 它 让 开发 者 能 够 构建 一 棵 浏览 絮 或 其 他 平台 的 
泻 染 带 所 能 使 用 的 组 件 树 。react-dom 就 是 这 样 一 个 演 染 器 ， 它 针对 的 是 浏览 融 环 境 
和 服务 硕 端 这 染 。React Native 库 专 注 于 原生 平台 , 它 能 够 为 iDS、Android 和 其 他 平台 
创建 React 应 用 。 
图 第 三 方 库 一 一 React 并 不 自 带 数据 建 模 、HTTP 调用 、 样 式 库 或 其 他 前 端 应 用 的 常见 工 
具 。 这 使 开发 人 员 可 以 在 自己 的 应 用 中 自由 地 使 用 其 他 代码 、 模 块 或 者 其 他 中 意 的 工具 。 





尽管 这 些 背 见 技术 并 没有 与 React 捆绑 在 一 起 , 但 围绕 React 的 更 广泛 的 生态 系统 中 却 
充满 了 极为 有 用 的 库 。 本 书 中 ， 我 们 将 使 用 其 中 一 些 库 ， 并 将 在 第 10 章 和 第 11 章 人 研究 
Redux 一 一 一 个 状态 管理 库 。 





国 运行 React 应 用 React 应 用 运行 在 开发 人 员 为 之 构建 应 用 的 平台 上 。 本 书 关注 的 是 
Web 平台 并 构建 了 一 个 基于 浏览 器 和 服务 需 的 应 用 ， 而 其 他 诸如 React Native 和 React VR 
这 样 的 项 目 则 创造 了 应 用 在 其 他 平台 上 运行 的 可 能 性 。 
本 书 中 我 们 会 花 大 量 的 时 间 来 探索 React 的 方方面面 , 但 开始 之 前 可 能 会 有 一 些 问 题 。React 
真 的 有 所 帮助 吗 ? 还 有 谁 在 使 用 React? 权衡 使 用 或 不 使 用 React 的 依据 有 哪些 ?在 采用 一 项 新 
技术 之 前 ， 这 些 都 是 希望 得 到 回答 的 重要 问题 。 
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图 1-1 React 能 够 用 组 件 创建 用 户 界面 。 组 件 维护 了 自身 的 状态 ， 使 用 “vanilla”JavaScript 编写 与 
运行 ， 并 从 React 继承 了 许多 有 用 的 接口 。 大 部 分 React 应 用 是 为 基于 浏览 器 的 环境 编写 的 ， 
但 也 可 以 用 于 iOS 和 Android 这 样 的 原生 环境 。 关 于 React Native 的 更 多 信息 ， 查 阅 
Nader Dabit 的 React Native in Action， 也 可 以 从 Manning 出 版 社 网 站 获取 


Q@ 这 实际 上 是 作者 开 的 一 个 小 玩笑 。 一 个 叫 Vanilla JS 的 框架 声称 自己 是 占有 率 最 高 的 库 ， 各 大 顶级 公司 
如 Facebook 、Google、Amazon 等 都 在 使 用 它 。 它 的 官方 文档 还 说 自己 的 使 用 量 是 jQuery 、Prototype、 
YUI 等 框架 的 总 和 还 多 。 框 架 不 需要 下 载 ， 因 为 浏览 器 已 经 内 置 了 这 个 框架 。 在 它 的 官方 网 站 中 它 非 党 
严肃 地 声明 了 上 述 事实 。 但 实际 上 ，Vanilla JS 指 的 就 是 原生 的 JavaScript， 这 个 框架 及 它 的 官网 只 是 一 
个 玩笑 而 已 ， 作 者 在 这 里 用 这 个 玩笑 指 代 原 生 JavaScript。 一 一 译 者 注 
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1.1.1 本 书 的 受众 


本 书面 向 那些 正 致力 于 构建 用 户 界 面 或 对 其 感 兴趣 的 人 。 实 际 上 ， 本 书 是 写 给 任何 对 React 
感 兴 趣 的 人 的 ， 即 使 他 们 的 工作 并 不 涉及 UI 工程 。 如 果 有 一 些 使 用 JavaScript 构建 前 端 应 用 的 
经 验 ， 读 者 将 从 本 书 获 得 最 大 收益 。 

只 要 了 解 JavaScript 的 基础 并 有 一 些 构建 Web 应 用 的 经 验 ， 就 能 学 会 如 何 用 React 构建 应 用 。 
本 书 中 不 会 涉及 JavaScript 的 基础 知识 。 诸 如 原型 继承 、ES2015 以 及 之 后 版 本 的 代码 、 强 制 类 型 
转换 、 语 法 、 关 键 字 、 类 似 async/await 的 异步 编程 模式 和 其 他 基础 主题 都 不 在 本 书 的 范围 内 。 
我 只 会 稍微 涉及 一 些 与 React 特别 相关 的 内 容 , 但 我 不 会 将 JavaScript 作为 一 门 语 言 来 深信 人 研究 。 

这 并 不 意味 着 如 果 不 了 解 JavaScript 就 不 能 学 习 React 或 者 无 法 从 本 书 中 学 到 任何 东西 。 但 如 果 
你 学 过 JavaScript， 那 么 将 有 更 多 收获 。 没 有 JavaScript 的 基础 知识 就 贸然 加 前 冲 会 让 事情 变 得 更 加 
困难 。 可 能 会 遇 到 这 样 的 情况 一 一 对 一 些 人 来 说 事情 看 起 来 就 像 “ 魔 法 ”一 一 事情 可 以 奏效 ， 但 这 
些 人 却 不 理解 为 什么 。 这 通 凋 会 伤害 开发 者 而 不 是 帮助 他 们 ， 所 以 …… 最 后 的 警告 是 : 在 和 学习 React 
之 前 要 先 熟悉 JavaScript 的 基础 知识 。JavaScript 是 一 种 富有 表现 力 和 灵活 性 的 语言 ， 你 会 受 上 它 的 ! 

你 可 能 已 经 很 熟悉 JavaScript, 甚至 之 前 已 经 尝试 过 React。 考虑 到 React 已 经 变 得 如 此 流行 ， 
这 并 不 会 让 人 太 过 惊讶 。 如 果 就 是 这 样 ， 那 么 你 将 能 够 更 深入 地 理解 React 的 一 些 核心 概念 。 但 
是 ， 如 果 你 已 经 使 用 了 一 段 时 间 React， 我 可 能 不 会 涉及 你 可 能 正在 寻找 的 非常 特定 的 主题 。 对 
于 这 类 读者 ， 可 以 看 看 其 他 React 相关 的 书籍 ， 如 React Native in Action。 

你 可 能 不 属于 (上述 ) 任何 一 类 ， 只 想 对 React 有 一 个 高 层 概览 ， 那 么 本 书 对 你 同样 适用 。 
你 将 了 解 React 的 基本 概念 ， 并 接触 用 React 编写 的 示例 应 用 。 你 将 通过 实践 了 解构 建 React 应 
用 的 基础 知识 ， 以 及 它 如 何 适 用 于 你 的 团队 或 下 一 个 项 目 。 


1.1.2 ”工具 说 明 


如 果 过 去 几 年 你 已 在 前 端 应 用 上 做 了 大 量 工 作 ， 那 么 就 不 会 对 这 一 事实 感到 惊讶 一 一 玮 纸 应 用 的 
工具 已 经 成 为 开发 过 程 中 与 框架 和 库 本 身 同样 重要 的 一 部 分 。 今 天， 开发 人 员 可 能 会 在 应 用 中 使 用 
Webpack、Babel 或 其 他 工具 。 这 些 工 具 和 其 他 工具 在 本 书 中 占据 什么 位 置 ? 你 需要 知道 哪些 东西 呢 ? 

你 并 不 需要 精通 Webpack、Babel 或 其 他 工具 就 能 阅读 这 本 书 。 我 创建 的 示例 应 用 使 用 了 为 
数 不 多 的 重要 工具 , 你 可 以 通过 阅读 示例 应 用 中 的 配置 代码 来 了 解 这 些 工 具 , 但 我 在 本 书 中 不 会 
深入 介绍 这 些 工 具 。 工具 变化 的 速度 很 快 , 更 重要 的 是 , 深入 讨论 这 些 主 题 将 远 远 超出 本 书 的 范 
围 。 当 工具 与 我 们 的 讨论 相关 时 ， 我 一 定 会 提示 ， 但 除 此 以 外 我 将 避免 涉及 它 。 

我 还 觉得 ， 学 习 像 React 这 样 的 新 技术 时 ， 工 具 可 能 会 让 人 分 心 。 你 已 经 试 着 让 目 己 的 思维 
转换 到 一 套 新 的 概念 和 范例 , 为 什么 还 要 学 习 复 杂 的 工具 来 扰乱 它 呢 ? 这 就 是 为 什么 第 2 章 要 先 
着 重 学 习 “ 原 生 ”React， 然 后 再 介绍 那些 需要 构建 工具 的 特性 , 如 JSX 和 JavaScript 语言 的 一 些 
特性 。 你 需要 熟悉 的 一 个 工具 是 npm。npm 是 JavaScript 的 包 管 理工 具 ， 我 们 将 使 用 它 安 疙 项 目 
依赖 并 在 命令 行 运行 项 目 命 令 。 你 可 能 对 npm 已 经 很 熟悉 了 ,但 如 果 没 有 ， 不 要 因此 而 放弃 阅 
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读本 书 。 你 只 需要 最 基本 的 命令 行 和 npm 技能 就 能 继续 。 


1.1.3 谁 在 使 用 React 


当 涉 及 开源 软件 时 ， 谁 使 用 它 《 以 及 谁 不 使 用 它 ) 不 只 是 关乎 流行 的 问题 。 它 影响 使 用 该 技 
术 的 体验 ( 包括 支持 、 文 档 和 安全 修复 的 可 用 性 )、 社 区 的 创新 水 平 ， 以 及 某 个 工具 的 潜在 生命 
周期 。 那些 有 着 活跃 社区 、 健 壮 生态 以 及 各 种 各 样 的 页 献 者 经 验 和 背景 的 工具 ,使 用 起 来 通常 会 
更 有 趣 、 更 容易 ， 总 体 上 也 更 顺利 。 

React 最 初 是 一 个 小 项 目 但 现在 广 受 欢迎 并 已 经 拥有 了 活跃 的 社区 。 没 有 社区 是 完美 的 ， 
React 社区 也 不 例外 , 但 就 开源 社区 而 言 ， 它 具有 许多 成 功 的 要 素 。 此 外 ，React 社区 还 包含 其 他 
较 小 的 开源 社区 的 子 集 。 这 令 人 生 旦 ， 因 为 React 生态 系统 看 起 来 非常 庞大 ,但 它 也 使 社区 更 加 
健壮 和 多 样 。 图 1-2 展示 了 一 张 React 生态 系统 的 地 图 。 在 本 书 的 整个 过 程 中 ， 我 提 到 了 各 种 各 
样 的 库 和 项 目 ， 如 果 想 要 更 多 地 了 解 React 生态 系统 , 我 整理 了 一 份 指南 放 在 我 的 博客 上 。 我 将 持 
续 更 新 它 并 确保 它 随 生态 系统 演进 。 


a React 生 态 系 统 
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虽然 开源 ( 项目 ) 可 能 是 开发 人 员 与 React 互动 的 主要 方式 , 但 你 可 能 每 天 都 在 使 用 React 
开发 的 应 用 。 许 多 公司 以 令 人 兴奋 的 不 同方 式 使 用 React， 下面 是 使 用 React 来 为 其 产品 助力 的 


一 些 公司 : 
国 ”Facebook; 国 ”Asana; 
国 Netflix; 国 ESPN; 
国 New Relic; 国 ” Walmart; 
国 Uber; 加 ”Venmo; 
国 ”Wealthfront; 国 Codecademy ; 
国 再 eroku ; 国 Atlassian; 
国 PayPal; 图 Asana; 
本 BBC; 国 Alrbnb; 
国 Microsoft; 国 Khan Academy; 
国 NFL; 国 FloQast; 
国 还 有 更 多 1 





这 些 公司 不 会 盲目 地 追随 JavaScript 社区 的 趋势 。 他 们 有 特殊 的 工程 要 求 一 一 影响 到 大 量 用 
户 并 且 必 须 在 严格 的 期 限 内 交付 产品 。 有 人 说 ,“ 我 听 说 React 不 错 ; 我 们 应 该 React 化 一 切 ”， 
这 种 说 法 并 不 能 打动 经 理 们 和 其 他 的 工程 师 们 。 公司 和 开发 人 员 想 要 好 工具 来 帮助 他 们 更 好 地 思 
考 和 快速 行动 ， 以 便 他 们 能 够 构建 高 强度 、 可 伸缩 和 可 靠 的 应 用 。 


12 ” React 不 能 做 什么 


到 目前 为 止 ， 我 已 经 从 较 高 层次 探讨 了 React: 谁 使 用 React， 本 书面 向 的 人 群 ， 以 及 其 他 一 
些 内 容 。 我 写本 书 的 主要 目的 是 教 人 使 用 React 创建 应 用 并 使 其 成 为 一 名 工程 师 。React 并 不 完美 ， 
但 用 其 工作 真 的 是 一 种 乐趣 , 我 已 经 看 到 很 多 团队 用 它 做 了 很 多 伟大 的 事情 。 我 喜欢 写 关 于 它 的 文 
章 ， 用 它 进行 创造 ， 在 会 议 上 听 到 关于 它 的 讨论 ， 偶 尔 参 与 关于 这 个 或 那个 模式 的 激烈 辩论 。 

但 如 果 不 谈 论 React 的 缺点 并 说 清 它 不 能 做 什么 , 那 我 就 是 在 帮 倒 忙 。 理 解 某 物 不 能 做 什么 和 
理解 它 能 做 什么 同样 重要 ,为 什么 ”最 好 的 工程 决策 和 思考 通常 基于 权衡 取 舍 而 不 是 基于 个 人 观点 
或 绝对 真理 ( React 从 根本 上 就 比 工 具 X 更 好 ， 因 为 我 喜欢 它 )。 就 前 者 而 言 ， 可 能 不 是 在 比较 两 
种 完全 不 同 的 技术 ( COBOL 和 JavaScript )， 甚 至 很 大 可 能 没有 考虑 那些 根本 不 适合 当前 任务 的 技 
术 ; 而 对 于 后 者 ,创建 伟大 的 项 目 和 解决 工程 挑战 永远 不 应 该 跟 个 人 观点 有 关 。 并 不 是 人 们 的 观点 
不 重要 ( 这 当然 不 是 事实 )， 而 是 个 人 观点 并 不 能 让 事情 变 得 更 好 ， 甚 至 可 能 完全 没有 任何 作用 。 


React 的 权衡 


如 果 权 衡 是 良好 软件 评估 和 讨论 的 基本 , 那么 React 中 有 什么 权衡 ? 首先 , React 有 时 被 称 为 “只 
是 视图 ”。 这 可 能 会 被 误解 ， 因 为 它 会 让 人 认为 React 只 是 一 个 像 Handlebars 或 Pug ( 曾 用 名 Jade ) 


1.2 ”React 不 能 做 什么 9 


的 模板 系统 ， 或 者 它 必须 是 MVC (模型 -视图 -控制 器 ) 架构 的 一 部 分 。 这 都 不 对 。React 可 以 是 这 
两 种 东西 ， 但 它 可 以 做 得 更 多 。 为 了 让 事情 更 简单 ， 我 将 更 多 地 用 React 是 什么 而 非 React 不 是 什么 
来 描述 React, 例如 ,“ 只 是 视图 ”。React 是 一 个 声明 性 的 、 基 于 组 件 的 库 , 用 于 构建 在 各 种 平台 上 ， 
甚至 是 未 来 的 虚拟 现实 平台 上 (React VR ) 工作 的 用 户 界面 : Web、 原 生 、 移 动 、 服 务 器 和 桌面 。 

这 导致 了 第 一 个 权衡 : React 主要 关注 UI 的 视图 方面 。 这 意味 着 它 并 不 是 通过 构建 来 完成 更 
为 全 面 的 框架 或 库 所 要 做 的 诸多 工作 。 与 Angular 这 样 的 框架 进行 一 个 快速 比较 可 能 有 助 于 真正 
理解 这 一 点 。 在 最 近 的 主要 发 布 中 ， 较 之 以 前 ，Angular 在 概念 和 设计 方面 与 React 有 了 更 多 的 
共同 点 ， 但 在 其 他 方面 ， 它 涵盖 了 比 React 更 大 的 领域 。Angular 包含 了 下 列 内 置 解决 方案 : 

加 HTTP 调用 ; 
表单 构建 和 验证 ; 
路 由 ; 
字符 串 和 数字 格式 化 ; 
国际 化 ; 
依赖 注入 ; 
基本 数据 建 模 原 语 ; 
日 定义 测试 框架 ( 尽管 这 并 不 像 其 他 领域 那样 是 什么 重要 的 区 别 ); 

国 ”默认 包含 的 服务 worker (一 种 用 worker 形式 来 执行 JavaScript 的 方法 )。 

够 多 了 ， 以 我 的 经 验 看 ， 人 们 对 伴随 一 个 框架 而 来 的 所 有 特性 通常 会 有 两 种 反应 。 要 人 么 类 
似 “ 哇 ， 我 不 需要 目 己 搞定 所 有 这 些 事 了 ”， 或 者 是 “ 哇 ， 我 都 没 法 选择 自己 做 事情 的 方式 了 ”。 
Angular、Ember 这 类 框架 的 好 处 是 ， 它 们 通常 有 精心 设计 的 方式 来 做 事 。 例 如 ，Angular 中 的 路 
由 是 由 内 置 的 Angular 路 由 器 完成 的 ，HTTP 任务 都 是 通过 内 置 的 HTTP 例 程 完成 的 ， 等 等 。 

这 种 方式 没有 什么 本 质 上 的 错误 。 我 曾 在 使 用 这 种 技术 的 团队 中 工作 过 , 我 也 在 采用 更 灵活 
的 方式 的 团队 中 工作 过 ,团队 会 选择 “只 把 一 件 事 做 好 ”的 技术 。 我 们 用 这 两 种 技术 都 取得 了 很 
好 的 效果 。 我 个 人 倾 问 于 “上 自主 选择 , 专 精 一 事 ” 的 方法 , 但 这 真 的 不 是 非 此 即 彼 , 这 只 是 权衡 。 
对 于 HTTP、 路 由 、 数 据 建 模 ( 尽管 它 确实 对 视图 中 的 数据 流 有 自己 的 看 法 ， 我 们 稍 后 会 看 到 )， 
或 者 其 他 可 能 在 Angular 这 类 框架 中 看 到 的 东西 ，React 并 没有 内 置 的 解决 方案 。 如 果 团 队 认 为 
没有 单一 框架 就 绝对 做 不 了 事 ， 那么 React 可 能 不 是 最 佳 选择 。 但 依 我 的 经 验 看 来 ， 大 多 数 团 队 
都 想 要 React 的 灵活 性 以 及 它 带 来 的 思维 模型 和 直观 API。 

React 的 灵活 方式 的 一 个 好 处 是 可 以 自由 地 选择 对 于 工作 来 说 最 好 的 工具 。 不 喜欢 某 个 HTTP 
库 的 工作 方式 ? 没 问题 ,用 其 他 库 蔡 换 它 。 想 要 用 不 同 的 方式 编写 表单 ? 放手 去 做 , 没 问 题 !React 
提供 了 一 组 强大 的 原 语 。 公 平地 说 ， 其 他 框架 ， 如 Angular， 通常 也 允许 把 东西 换 掉 ,但 实际 起 
作用 的 和 社区 文 撑 的 做 事 方 式 通 常 是 把 所 有 东西 内 置 或 包含 进来 。 

拥有 更 多 上 自由 的 明显 缺点 是 ， 如 果 习 惯 了 像 Angular 或 Ember 这 样 的 更 全 面 的 框架 , 那么 需 


J 绝 非 有 意 一 语 双 关 ， 看， 这 是 一 本 关于 反应 ( React ) 的 书 ， 就 是 这 样 。 
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要 为 应 用 的 不 同 领域 想 出 或 者 找到 自己 的 解决 方案 。 这 是 好 是 坏 取 决 于 诸多 因素 ,如 团队 开发 人 
员 的 经 验 、 工 程 管理 偏好 ， 以 及 其 他 特定 于 具体 情况 的 因素 。“ 通 用 型 ”和 “ 专 一 型 ”这 两 种 方 
式 都 有 非常 充分 的 理由 。 我 更 倾 问 于 相信 这 种 方法 : 将 决定 或 创建 正确 工具 的 责任 交 给 团队 , 随 
着 时 间 推 移 去 适应 和 做 出 灵活 的 、 视 情况 而 定 的 有 关 工 具 的 决策 。 再 考虑 到 无 比 广阔 的 JavaScript 
生态 系统 一 一 终归 会 为 正在 解决 的 问题 找到 些 东 西 。 但 最 终 , 实际 上 优秀 的 、 高 影响 力 的 团队 会 
用 这 两 种 方式 (有 时 在 同一 时 间 ! ) 来 构建 他 们 的 产品 。 

在 继续 之 前 ， 如 果 不 提 一 下 锁定 ， 那 就 是 我 的 失职 了 。JavaScript 框架 很 少 能 真正 地 相互 协 
作 是 一 个 无 法 回避 的 事实 ; 通常 不 能 让 应 用 一 部 分 是 Angular， 一 部 分 是 Ember， 一 部 分 是 
Backbone， 一 部 分 是 React， 至 少 在 不 细 分 每 个 部 分 或 严格 控制 它们 之 间 的 交互 的 情况 下 不 要 这 
么 做 。 当 可 以 避免 这 种 情况 时 ， 把 自己 置身 于 这 样 的 处 境 中 通常 是 没有 意义 的 。 通 常 ， 人 们 会 在 
一 个 特定 的 应 用 中 使 用 一 个 或 暂时 性 地 最 多 使 用 两 个 主要 框架 。 

但 是 当 需 要 改变 时 会 发 生 什 么 ? 如果 使 用 的 工具 像 Angular 那样 具有 广泛 的 职责 , 那么 迁移 
应 用 时 可 能 由 于 与 框架 的 深度 集成 而 需要 完全 重 写 。 可 以 重 写 应 用 程序 的 较 小 部 分 , 但 不 能 只 是 
蔡 换 几 个 因数 就 期 望 一 切 都 正常 工作 。 这 正 是 React 的 闪耀 之 处 。 它 使 用 了 非常 少 的 “魔法 ” 方 
言 。 这 并 不 意味 着 它 能 让 迁移 变 得 毫 无 难度 ， 但 它 确 实 有 助 于 摆脱 与 Angular 这 样 的 框架 紧密 集 
成 所 市 来 的 迁移 成 本 一 一 迁移 到 框架 上 或 从 框架 上 迁移 出 来 。 

选择 React 时 需要 做 出 的 另 一 个 权衡 是 ， 它 主要 由 Facebook 开发 和 构建 并 且 是 为 了 满足 
Facebook 的 UI 需求 。 如 果 你 的 应 用 与 Facebook 应 用 的 UI 需求 有 本 质 区 别 ， 那 么 使 用 React 可 
能 要 吃 不 少 苗头 。 幸运 的 是 , 大 多 数 现代 Web 应 用 都 在 React 的 技术 范围 内 , 但 也 有 一 些 应 用 不 
在 此 范围 内 。 这 可 能 还 包括 那些 不 适用 现代 Web 应 用 的 常规 UI 范式 的 应 用 , 或 是 那些 具有 非常 
特殊 性 能 需求 的 应 用 (如 高 速 股票 行情 自动 收录 器 )。 然 而 ， 即 使 是 这 些 应 用 ， 也 可 以 用 React 
来 解决 ， 尽 管 有 些 情 况 下 需要 更 为 专门 的 技术 。 

我 们 要 讨论 的 最 后 一 个 权衡 是 React 的 实现 和 设计 。 融 入 React 核心 的 系统 会 在 组 件 中 的 数 
据 发 生变 化 时 处 理 UI 的 更 新 。 开 发 人 员 可 以 使 用 被 称 为 生命 周期 方法 的 特定 方法 来 挂 载 进 它们 
执行 更 改 的 过 程 。 我 会 在 后 面 几 章 中 详细 介绍 这 些 内 容 。React 处 理 UI 更 新 的 系统 使 人 们 更 为 容 
易 地 专注 于 构建 应 用 能 够 使 用 的 模块 化 的 、 健壮 的 组 件 。React 将 UI 与 数据 保持 同步 的 大 部 分 工 
作 抽 象 分 离 出 去 是 其 受 开 发 人 员 青 睐 的 一 个 重要 原因 , 也 是 其 成 为 开发 人 员 手 中 的 一 个 强力 工具 
的 重要 原因 。 但 还 不 能 说 明 驱 动 这 个 技术 的 “引擎 ”没有 缺点 或 没有 折 中 。 

React 是 一 种 抽象 ， 因 此 它 作 为 抽象 的 代价 仍然 存在 。 由 于 React 是 以 特定 的 方式 构建 并 通 
过 API 癌 外 皮 露 的 , 开发 人 员 不 会 对 其 使 用 的 系统 有 太 多 的 可 见 性 。 这 也 意味 着 需要 以 一 种 地 地 
道道 的 React 方式 来 构建 UI。 幸 运 的 是 ，React 的 API 提供 了 “紧急 出 口 ”， 让 开发 者 可 以 深入 
到 较 低 的 抽象 层级 中 。 人 们 仍然 可 以 使 用 jQuery 这 样 的 工具 , 但 是 需要 以 一 种 与 React 兼容 的 方 
式 使 用 。 这 又 是 一 种 折 中 : 一 种 更 简单 的 思维 模型 ， 代 价 是 不 能 完全 以 喜欢 的 方式 做 所 有 事情 。 

开发 者 不 仅 会 失去 对 底层 系统 的 一 些 可 见 性 , 还 需要 为 React 的 行事 方式 买单 。 这 往往 会 影响 应 
用 栈 的 一 小 部 分 ( 只 有 视图 而 不 是 数据 、 特 殊 的 表单 构建 系统 、 数 据 建 模 等 )， 但 仍然 会 有 影响 。 我 
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布 望 是 人 们 看 到 React 的 好 处 远 远 超过 其 学 习 成 本 ， 并且 在 使 用 它 时 所 做 的 权衡 通常 会 让 使 用 者 成 为 
一 个 更 好 的 开发 者 。 但 是 ,如 果 我 假装 React 会 神奇 地 解决 所 有 的 工程 挑战 ， 那 就 虚伪 了 。 
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我 们 已 经 讨论 了 一 些 React 的 高 级 特性 。 我 认为 React 可 以 帮助 研发 团队 更 好 地 创建 用 户 界 
面 ， 并 且 这 得 益 于 React 提供 的 思维 模型 和 API。 所 有 这 一 切 背 后 隐藏 着 什么 ?React 的 主旨 是 推 
动 简化 复杂 的 任务 并 把 不 必要 的 复杂 性 从 开发 人 员 身 上 抽 离 出 来 。React 试图 将 性 能 做 得 恰 到 好 
处 ,从 而 让 研发 人 员 腾 出 时 间 思 考 应 用 的 其 他 方面 。 它 这 么 做 的 主要 方式 之 一 就 是 鼓励 开发 人 员 
使 用 声明 式 编 程 而 不 是 命令 式 编 程 。 开 发 人 员 要 声明 组 件 在 不 同 状态 下 的 行为 和 外 观 ， 而 React 
的 内 部 机 制 处 理 管理 更 新 、 更 新 UI 以 反映 更 改 等 的 复杂 性 。 

驱动 这 些 的 主要 技术 之 一 就 是 虚拟 DOM。 这 种 虚拟 DOM 是 模仿 或 镜像 存在 于 浏览 器 中 的 
文档 对 象 模型 的 数据 结构 或 数据 结构 的 集合 ,我 之 所 以 说 “这 种 虚拟 DOM” ,是 因为 其 他 像 Ember 
这 样 的 框 积 采用 了 它们 目 己 的 类 似 技术 的 实现 。 通常 ， 虚拟 DOM 会 作为 应 用 程序 代码 和 浏览 器 
DOM 之 间 的 中 间 层 。 虚 拟 DOM 向 开发 人 员 隐 藏 了 变更 检测 与 管理 的 复杂 性 并 将 其 转移 到 专门 
的 抽象 层 。 在 接 下 来 的 小 节 中 ， 我 们 将 从 更 高 层次 来 了 解 它 是 如 何在 React 中 起 作用 的 。 图 1-3 
展示 了 DOM 和 虚拟 DOM 之 间 的 关系 ， 我 们 稍 后 将 对 此 进行 讨论 。 


浏览 右 


Java Script 解释 器 浏览 器 “原生 ”引擎 


合成 事件 系统 





1-3 DOM 和 虚拟 DOM。React 的 虚拟 DOM 处 理 数 据 的 变更 检测 并 将 浏览 器 事件 转换 为 React 
组 件 可 以 理解 和 响应 的 事件 。React 的 虚拟 DOM 还 为 性 能 专门 优化 了 对 DOM 的 更 新 操作 


1.3.1 DOM 
确保 我 们 理解 React 的 虚拟 DOM 的 最 佳 途径 就 是 首先 检查 我 们 对 DOM 的 理解 。 如 采 和 觉得 
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自己 对 DOM 已 经 了 然 于 心 , 可 以 选择 跳 过 这 部 分 。 但 如 果 不 是 , 让 我 们 从 一 个 重要 的 问题 开始 : 
什么 是 DOM? DOM 或 文档 对 象 模型 是 一 个 允许 JavaScript 程序 与 不 同类 型 的 文档 (HTML、 
XML 和 SVG ) 进行 交互 的 编程 接口 。 它 有 标准 驱动 的 规范 ， 这 意味 着 公共 工作 组 已 经 建立 了 它 
应 该 具有 的 标准 特性 集 以 及 行为 方式 。 虽 然 存 在 其 他 实现 ， 但 是 DOM 几乎 已 经 是 Chrome、Firefox 
和 Edge 等 Web 浏览 絮 的 代名词 了 。 

DOM 提供 了 访问 、 存 储 和 操纵 文档 不 同 部 分 的 结构 化 方式 。 从 较 高 层面 来 讲 , DOM 是 一 种 
反映 了 XML 文档 层次 结构 的 树 形 结构 。 这 个 树 结构 由 子 树 组 成 , 子 树 由 节点 组 成 。 这些 (市 点 ) 
是 组 成 Web 页 面 和 应 用 的 div 和 其 他 元 素 。 

人 们 之 前 可 能 使 用 过 DOM API 一 一 但 他 们 没有 意识 到 自己 正在 使 用 它 。 每 当 使 用 JavaScript 
中 的 方法 访问 、 修 改 或 者 存储 一 些 HTML 文档 相关 的 信息 时 ， 几 乎 可 以 肯定 ， 人 们 就 是 在 使 用 
DOM 或 DOM 相关 的 API。 这 意味 着 ， 你 在 JavaScript 中 使 用 的 方法 不 全 是 JavaScript 语言 本 身 
的 一 部 分 (daocument .findqElemenyByIQ、querySelectorRAl1、alett 等 )。 它 们 是 更 大 
的 Web API 集合 (浏览 器 中 的 DOM 和 其 他 API ) 的 一 部 分 ， 这 些 API 让 人 们 能 够 与 文档 交互 。 
图 1-4 展示 了 可 能 在 Web 页 面 中 看 到 的 DOM 树 结 构 的 简化 版 本 。 


Document 


Root element 


<html> 
Element — Element 
<head> <body> 
Element: Element: Element: 
<title> <a> <hl> 
inner Text: innerText: inner Text: 
“React” “React 1s cool” “Welcome” 


1-4 这 是 DOM 树 结构 的 简化 版 本 ， 使 用 人 们 熟悉 的 元 素 。 暴 露 给 
JavaScript 的 DOM API 允许 对 树 中 的 这 些 元 素 执行 操作 


用 来 更 新 或 查询 Web 页 面 的 稼 见方 法 或 属性 有 getElementById、parent .appendChild.、 
querySelectorRAl1、innerHTML 等 。 这 些 接口 都 是 由 宿主 环境 〈 这 里 指 的 是 浏览 右 ) 提供 
的 并 允许 JavaScript 与 DOM 交互 。 没 有 这 些 能 力 ， 我 们 就 没有 那么 有 趣 的 Web 应 用 可 用 了 ,也 
可 能 没有 关于 React 的 书 可 写 了 。 

与 DOM 交互 通常 很 简单 ， 但 在 大 型 Web 应 用 中 可 能 会 变 得 复杂 。 幸 运 的 是 ， 当 使 用 React 
构建 应 用 时 我 们 通常 不 需要 直接 与 DOM 交互 一 一 我 们 基本 上 把 它 都 交 给 了 React。 有 些 场景 下 
我 们 可 能 希望 绕 过 虚拟 DOM 直接 与 DOM 交互 ， 我 们 将 在 后 面 的 几 章 对 此 进行 讨论 。 
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1.3.2 虚拟 DOM 


浏览 器 中 的 Web API 让 我 们 可 以 使 用 JavaScript 通过 DOM 与 Web 文档 进行 交互 。 但 如 果 我 
们 已 经 能 做 到 这 一 点 ， 为 什么 在 这 之 间 还 需要 别 的 东西 ?7 首先 我 想 说 明 的 是 ，React 实现 虚拟 
DOM 并 不 意味 着 常规 Web API 不 好 或 者 不 如 React 好 。 没有 它们 ，React 就 不 能 工作 。 然 而 , 在 
更 大 的 Web 应 用 中 直接 使 用 DOM 的 确 有 一 些 痛 点 , 通常 这 些 痛 点 出 现在 变更 检测 方面 。 当 数据 
变化 时 ， 我 们 希望 通过 更 新 UI 来 反映 它 , 但 很 难以 一 种 有 效 且 易于 理解 的 方式 做 到 这 点 ， 所 以 
React 致力 于 解决 这 个 问题 。 

出 现 这 个 问题 的 部 分 原因 是 浏览 器 处 理 与 DOM 交互 的 方式 。 当 访问 、 修 改 或 创建 DOM 元 
素 时 , 浏览 絮 常 第 要 在 一 个 结构 化 的 树 上 执行 查询 来 找到 指定 的 元 素 。 这 只 是 访问 一 个 元 素 ,， 而 
有 是 通常 仅 是 更 新 的 第 一 部 分 。 通 常情 况 下 ,作为 更 改 的 一 部 分 ， 它 不 得 不 重新 进行 布局 、 缩 放 和 和 
其 他 操作 一 一 所 有 这 些 操作 往往 计算 量 都 很 大 。 虚 拟 DOM 也 无 法 绕 过 这 个 问题 , 但 它 可 以 在 这 
些 限制 下 帮助 优化 对 DOM 的 更 新 。 

当 创建 和 管理 一 个 处 理 随 时 间 变 化 的 数据 的 大 型 应 用 时 ， 可 能 需要 对 DOM 进行 许多 更 改 ， 
这 些 更 改 通常 会 发 生 冲 突 或 以 不 太 理 想 的 方式 完成 。 这 可 能 会 叶 致 一 个 过 于 复杂 的 系统 ,这 个 系 
统 不 但 对 工程 师 来 说 难以 使 用 而 且 可 能 会 导致 用 户 体 验 不 佳 一 一 这 是 “ 双 输 ”, 因 此 ,性 能 是 React 
设计 和 实现 的 男 一 个 关键 考虑 因素 。 实 现 虚拟 DOM 有 助 于 解决 这 个 问题 , 但 应 该 注意 的 是 ， 它 
设计 得 只 是 “ 够 快 ” 而 已 。React 的 虚拟 DOM 更 为 重要 的 是 提供 了 健壮 的 API、 简 单 的 思维 模 
型 和 诸如 览 浏 览 需 兼容 性 等 其 他 特性 ， 而 不 是 对 性 能 的 极端 关注 。 我 之 所 以 强调 这 一 点 是 因为 人 
们 可 能 听 说 虚拟 DOM 是 某 种 “性 能 银 弹 "。 它 确实 是 高 性 能 的 , 但 它 并 不 是 神奇 的 “性 能 银 弹 ”， 
最 后 我 想 说 的 是 ，React 的 许多 其 他 好 处 对 于 使 用 React 更 为 重要 。 





1.3.3 ”更 新 与 差异 比 对 


虚拟 DOM 是 如 何 工作 的 ? React 的 虚拟 DOM 与 男 一 个 软件 世界 有 一 些 共同 点 一 一 3D 游戏 ,3D 
游戏 有 时 会 使 用 一 个 泻 染 过 程 ， 其 工作 原理 大 致 如 下 : 从 游戏 服务 需 获 取信 息 ， 将 信息 发 送 到 游戏 
世界 ( 用户 看 到 的 视觉 表现 ), 确定 需要 对 虚拟 世界 进行 哪些 更 改 , 最 后 让 显卡 决定 所 需 的 最 小 更 改 。 
这 种 方法 的 一 个 优点 是 ， 只 需要 一 些 资源 来 处 理 增 量 更 新 ， 这 种 更 新 方式 通常 比 全 部 更 新 快 得 多 。 

这 是 对 3D 游戏 渲染 和 更 新 方式 的 粗略 描述 ， 当 审视 React 执行 更 新 的 方式 时 ， 这 个 基本 思 
想 为 我 们 提供 了 一 个 很 好 的 参考 。DOM 变更 做 得 不 好 的 话 代价 可 能 会 很 大 ， 所 以 React 试图 在 
更 新 UI 方面 更 有 效率 并 采用 了 类 似 3D 游戏 的 方法 。 

如 图 1-5 所 示 ，React 在 内 存 中 创建 并 维护 了 一 个 虚拟 DOM， 并 且 一 个 像 React-DOM 这 
样 的 泻 染 器 基于 更 改 对 浏览 器 DOM 进行 更 新 。React 可 以 执行 智能 更 新 并 且 只 更 新 已 更 改 的 部 
分 ， 因 为 它 可 以 使 用 启发 式 对 比 来 计算 内 存 DOM 的 哪些 部 分 需要 更 新 到 DOM。 理 论 上 讲 ， 
这 比 “ 脏 检查 ”或 其 他 更 暴力 的 方法 更 加 简洁 优雅 ， 但 主要 的 实践 意义 是 ， 开 发 者 可 以 少 考虑 
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真正 的 DOM 


已 更 新 的 DOM 





内 存 中 的 DOM 
图 1-5 ” React 的 对 比 和 更 新 流程 。 当 改变 发 生 时 ，React 确定 实际 DOM 和 内 存 DOM 的 差异 ， 然 后 对 浏 
览 器 DOM 执行 高 效 更 新 。 这 个 过 程 通常 被 称 为 diff ( 什么 改变 了 ) 和 patch ( 只 更 新 改变 的 东西 ) 过 程 


1.3.4 虚拟 DOM: 渴求 速度 


正如 我 所 指出 的 ， 虚 拟 DOM 有 很 多 比 速度 更 重要 的 东西 。 它 通过 设计 得 到 高 性 能 ， 并 且 通 
常会 产生 简单 快速 的 应 用 ， 这 样 的 速度 对 于 现代 Web 应 用 的 需要 已 经 足够 快 了 。 工 程 师 们 对 性 
能 和 更 好 的 思维 模型 如 此 欣赏 ， 以 至 于 许多 流行 的 JavaScript 库 都 在 创建 自己 版 本 的 虚拟 DOM 
或 者 变 体 的 虚拟 DOM。 即 使 是 在 这 些 情况 下 ， 人 们 也 倾向 于 认为 虚拟 DOM 主要 关注 的 是 性 能 。 
性 能 是 React 的 关键 特性 ， 但 与 简单 相 比 较 ， 它 却 是 次 要 的 。 虚 拟 DOM 一 定 程度 上 能 够 让 开发 
人 员 推 迟 思考 复杂 的 状态 逻辑 并 专注 于 应 用 中 其 他 更 重要 的 部 分 。 和 总而言之 , 速度 和 简单 意味 着 
更 快乐 的 用 户 和 更 快乐 的 开发 者 一 一 双赢 ! 

我 伦 了 些 时 间 来 讨论 虚拟 DOM, 但 我 并 不 想 让 人 和 觉得 它 是 使 用 React 的 重要 部 分 。 实 际 上 ， 
人 们 不 需要 过 多 考虑 虚拟 DOM 是 如 何 完成 数据 更 新 或 如 何 对 应 用 进行 更 改 的 。 这 正 是 React 简 
单 的 地 方 : 人 们 被 解放 出 来 去 关注 应 用 中 最 需要 关注 的 那些 部 分 。 


14 组 件 : React 的 基本 单元 


React 不 只 是 用 新 视 的 方式 来 处 理 数据 随时 间 变 化 的 问题 ， 它 还 专注 于 将 组 件 作 为 组 织 应 用 
程序 的 范式 。 组 件 是 React 中 最 基本 的 单元 。 用 React 创建 组 件 有 几 种 不 同 的 方法 ， 后 面 的 几 章 
会 介绍 这 些 方法 。 以 组 件 的 方式 思考 不 仅 对 于 理解 React 的 工作 方式 至 关 重 要 ， 而 且 对 于 理解 如 
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何在 项 目 中 更 好 地 使 用 它 也 至 关 重 要 。 


1.4.1 ”组件 概览 


什么 是 组 件 ? 这 是 一 个 更 大 的 话题 。 人 们 可 能 已 经 很 熟悉 组 件 的 概念 了 , 并 且 可 能 经 常 看 到 
它们 ， 即 使 他 们 可 能 没有 意识 到 这 一 点 。 在 设计 和 构建 用 户 界面 时 , 使 用 组 件 作 为 思维 和 可 视 化 
工具 能 够 得 到 更 好 、 更 直观 的 应 用 设计 与 使 用 。 可 以 将 任意 东西 作为 组 件 , 尽管 并 不 是 所 有 东西 
作为 组 件 都 有 意义 。 举 个 例子 ， 如 果 认 定 整 个 界面 是 一 个 组 件 ， 并 且 没 有 子 组 件 或 进一步 细 分 ， 
那么 你 可 能 并 没有 帮 到 自己 。 相 反 , 将 界面 的 不 同 部 分 分 解 成 可 以 组 合 、 复 用 和 易于 重组 的 部 分 
是 很 有 帮助 的 。 

为 了 开始 以 组 件 的 方式 思考 ,我 们 将 查看 一 个 示例 界面 并 将 其 分 解 为 不 同 的 组 成 部 分 。 图 1-6 
展示 了 一 个 将 在 后 续 部 分 使 用 的 示例 界面 。 用 户 界 面 通 常 包含 一 些 能 够 在 界面 的 其 他 部 分 复 用 的 元 
素 ， 即 使 它们 没有 被 复 用 ， 它 们 至 少 是 独特 的 。 这 些 不 同 元 素 一 一 界面 的 独特 元 素 一 一 可 以 被 认 
为 是 组 件 。 图 1-6 中 左边 的 界面 被 分 解 为 右边 的 组 件 。 





Letters|Social 









如 果 我 们 希望 做 事 得 心 应 手 ， 那 必须 首先 学 会 辛勤 付出 。 
一 一 塞 绢 尔 : 约翰 逊 






塞 坡 尔 ' 约翰 逊 对 我 来 说 太 主流 了 。 














Peter 评 论说 
谁 是 塞 饭 尔 : 约翰 逊 ? 











Mitchell 评 论说 
(@Peter 放下 Letters 去 写作 业 ! 









Peter 评 论说 
@Mitchell 好 吧 老 爸 :P 





| 
| 
| 
| 
| 





| SG -一 一 一 -一 一 
| | 创建 评论 组 件 
| i 
| 评论 bb | 


图 1-6 一 个 界面 被 拆 解 为 组 件 的 例子 。 每 一 个 不 同 部 分 都 可 以 被 认为 是 一 个 组 件 。 
具有 相同 性 质 的 重复 项 可 以 被 认为 是 一 个 组 件 在 不 同 数 据 上 得 到 复 用 
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练习 1-1 组 件 思维 

”访问 一 个 喜欢 或 常 去 的 网 站 ( 如 GitHub ) 并 将 其 界面 折 解 成 组 件 。 当 这 样 做 的 时 候 ， 你 可 能 会 发 现 
自己 把 事物 拆 解 成 了 不 同 的 部 分 。 那 什么 时 候 停止 拆 解 呢 ? 一 个 独立 的 字母 应 该 作为 一 -个 组 件 吗 ? 组 件 
什么 时 候 才 算 小 呢 ? 什么 时 候 要 将 一 组 元 素 作为 一 个 组 件 ? 


1.4.2 ”React 中 的 组 件 : 封装 与 复 用 


React 组 件 具 有 良好 的 封 汶 性 、 复 用 性 和 组 合 性 。 这 些 特性 有 助 于 为 用 户 提 供 一 种 更 人 简单、 
更 优雅 的 方式 来 思考 和 构建 用 户 界 面 。 应 用 可 以 由 清晰 、 简 洁 的 分 组 组 成 ， 而 不 是 像 意大利 面条 
那样 一 团 乱 。 使 用 React 来 构建 应 用 就 像 使 用 乐高 积木 来 构建 项 目 一 样 ， 不 同 的 是 构建 应 用 时 有 
取 之 不 尽 的 “积木 >”。 人 们 可 能 会 遇 到 bug， 但 幸运 的 是 不 会 踩 到 “积木 ”上 。 

在 练习 1-1 中 你 实践 了 使 用 组 件 进 行 思 考 并 将 界面 拆 解 成 了 组 件 。 可 以 用 很 多 方法 来 做 这 件 
事 , 并 且 这 些 方 法 可 能 没有 特别 的 组 织 方式 或 惯例 。 这 没关系 。 但 是 ， 当 使 用 React 中 的 组 件 时 ， 
考虑 组 件 设 计 上 的 组 织 和 一 致 性 就 非常 重要 了 。 需要 设计 独立 的 并 且 关 注 特定 问题 或 一 组 相关 问 
题 的 组 件 。 

这 有 助 于 产生 那 种 在 应 用 中 可 移植 的 、 逻 辑 分 组 的 、 易 于 移动 和 复 用 的 组 件 。 即 使 使 用 了 其 
他 库 ， 设 计 恨 好 的 React 组 件 也 应 该 是 相当 独立 的 。 将 UI 分 解 成 组 件 可 以 让 人 更 轻松 地 处 理应 
用 的 不 同 部 分 。 组件 间 的 边界 意味 着 功能 和 组 织 可 以 被 良好 地 定义 , 而 独立 的 组 件 则 意味 着 它们 
可 以 更 容易 地 被 复 用 和 移动 。 

React 中 的 组 件 需 要 一 起 工作 。 这 意味 着 可 以 将 组 件 组 合 起 来 形成 新 的 复合 组 件 。 组 件 组 合 
是 React 最 强大 的 部 分 之 一 。 可 以 创建 一 个 组 件 并 让 应 用 的 其 余部 分 复 用 它 ， 这 在 大 型 应 用 中 通 
党 特别 有 帮助 。 如 果 喘 处 一 个 大 中 型 团队 中 ， 可 以 将 组 件 发 布 到 私有 注册 中 心 (npm 或 其 他 )， 
其 他 团队 可 以 很 容易 地 将 这 些 组 件 拉 下 来 并 将 它们 用 到 一 个 新 的 或 已 有 的 项 目 中 。 这 可 能 不 是 一 
个 适用 于 所 有 规模 团队 的 场景 , 但 即使 是 更 小 规模 的 团队 也 可 以 从 React 组 件 带 来 的 代码 复 用 中 
获 益 。 

React 组 件 的 最 后 一 个 方面 是 生命 周期 方法 。 当 组 件 经 过 其 生命 周期 的 不 同时 期 时 ( 挂 载 、 
更 新 、 僵 载 等 )， 可 以 使 用 这 些 可 预测 的 、 定 义 良 好 的 方法 。 我 们 将 在 后 面 几 童 花 很 多 时 间 在 这 
上 旦 施 污 上 ， 
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现在 对 React 中 的 组 件 有 了 更 多 的 了 解 。 对 于 个 人 开发 者 ，React 能 让 他 们 的 生活 更 轻松 。 
但 在 团队 中 呢 ? 总 的 来 说 ，React 对 个 人 开发 者 具有 如 此 吸引 力 的 原因 也 是 使 它 成 为 团队 最 佳 选 
择 的 原因 。 无 论 炒作 或 狂热 的 开发 者 如 何 或 吹 , 同 任何 技术 一 样 ,对 每 个 案例 或 项 目 来 说 ,React 
并 不 是 适用 于 每 种 情况 或 每 个 项 目的 完美 解决 方案 。 正 如 已 经 看 到 的 ， 有 很 多 事情 React 都 没有 
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做 , 但 只 要 是 React 做 的 事情 ， 它 都 做 得 非常 好 。 

是 什么 使 React 成 为 大 型 团队 和 大 型 应 用 的 优秀 工具 ? 首先 ， 使 用 它 很 简单 。 简 单 和 简易 不 
是 一 回 事 。 人 入 易 的 方案 往往 又 脏 又 快 , 最 糟糕 的 是 ,它们 可 能 欠 下 技术 债 。 真 正 简单 的 技术 是 灵 
活 和 健壮 的 。React 既 提 供 了 能 够 掌控 的 强大 抽象 ， 也 提供 了 在 必要 时 可 下 降 到 底层 细节 中 去 的 
方法 。 简 单 的 技术 更 容易 理解 和 使 用 ， 因 为 简化 和 删除 不 必要 东西 的 困难 工作 已 经 完成 了 。 在 很 
多 方面 ，React 都 让 简单 变 得 容易 做 到 ， 它 提供 了 有 效 方法 却 没 有 引入 有 害 的 “ 黑 魔 法 ”或 不 透 
明 的 API。 

所 有 这 些 对 个 人 开发 者 来 说 都 很 棱 ， 但 这 种 效应 在 更 大 的 团队 和 组 织 中 会 被 放大 。 尽 管 React 
肯定 有 改进 和 持续 增长 的 空间 , 但 使 其 成 为 一 种 简单 灵活 的 技术 的 艰苦 工作 使 工程 团队 们 得 到 了 
回报 。 具 有 民 好 的 思维 模型 的 更 简单 的 技术 往往 能 减轻 工程 师 的 思维 负担 ， 让 他 们 行动 更 快 ,这 
会 产生 更 大 的 影响 。 作 为 额外 的 收获 , 一 套 更 简单 的 工具 对 新 员工 来 说 更 容易 学 习 。 尝 试 让 一 个 
团队 新 成 员 加 入 一 个 过 于 复杂 的 技术 栈 不 仅 要 花 时 间 培 训 工 程 师 ， 还 可 能 意味 着 新 的 开发 者 在 一 
段 时 间 内 无 法 做 出 有 意义 的 贡献 。 由 于 React 力图 仔细 重新 思考 已 建立 的 最 佳 实践 ， 因 此 范式 转 
换 会 有 初始 成 本 ,但 那 之 后 通常 是 大 而 长 期 的 收益 。 

与 同一 领域 中 的 其 他 工具 相 比 ，React 是 一 个 相当 不 同 的 工具 ,但 在 职责 和 功能 方面 ，React 
却 是 一 个 非常 轻 量 的 库 。 像 Angular 这 样 的 框架 要 求 使 用 者 为 更 全 面 的 API 买单 ， 而 React 却 只 
关注 应 用 的 视图 。 这 意味 着 将 它 与 使 用 者 当前 的 技术 集成 起 来 要 简单 得 多 , 并 且 在 其 他 方面 为 使 
用 者 留 下 了 选择 的 空间 。 一些 功能 固化 的 框架 和 库 要 求 使 用 者 在 要 么 全 盘 接 受 要 么 彻底 不 用 之 间 
进行 抉择 ， 但 React“ 仅 是 视图 ”的 范畴 以 及 与 JavaScript 的 全 面 互 操作 性 意味 着 情况 并 非 总 是 
如 此 。 

与 其 一 下 子 全 扑 上 去 ， 使 用 者 可 以 将 不 同 的 项 目 或 工具 逐步 转换 为 React 而 又 不 必 对 其 结构 、 
构建 技术 栈 或 其 他 相关 领域 进行 重大 改变 。 对 几乎 所 有 技术 来 说 ,这 都 是 理想 的 方式 ， 而 这 正 是 
React 开始 在 Facebook 演 试 时 的 方法 一 一 在 一 个 小 项 目 上 使 用 。 从 那里 ， 随 着 越 来 越 多 的 团队 看 
到 并 体验 到 React 的 好 处 ， 它 逐渐 成 长 并 扎根 。 这 一 切 对 使 用 者 的 团队 意味 着 什么 ? 这 表示 使 用 
者 无 须 冒 险 用 React 完全 重 写 产品 就 可 以 评估 React。 

React 的 人 简单、 非 固 化 的 本 质 以 及 性 能 让 它 非常 适合 大 大 小 小 的 项 目 。 随 着 使 用 者 不 断 探 索 
React， 你 将 看 到 它 是 如 何 适 合 团 队 和 项 目的 。 


16 小 结 


React 是 一 个 用 来 创建 用 户 界面 的 库 ， 最 初 由 Facebook 创建 并 开源 。 它 是 一 个 考虑 了 简单 、 
高 性 能 和 组 件 化 的 JavaScript 库 。 它 没有 提供 创建 应 用 的 全 面 工具 集 ， 而 是 允许 使 用 者 选择 如 何 
实现 以 及 使 用 什么 来 实现 数据 模型 、 服 务 顺 调用 和 其 他 应 用 的 关注 点 。 这 些 关键 因素 以 及 其 他 因 
素 使 得 React 可 以 成 为 大 大 小 小 的 应 用 和 团队 的 绝 佳 工 具 。 下 面 简 单 总 结 一 下 React 对 几 个 典型 
角色 的 好 处 。 
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加 个 人 开发 者 一 一 一 旦 学 会 React, 开发 者 可 以 很 容易 地 快速 构建 应 用 。 更 大 的 团队 通常 更 
容易 在 应 用 上 开展 工作 ,复杂 的 特性 更 容易 实现 和 维护 。 
国 工程 经 理 一 一 开发 者 学 习 React 时 会 有 一 定 的 初始 成 本 ， 但 最 终 他 们 将 能 够 更 容易 、 更 
快 地 开发 复杂 应 用 。 
国 CTO 或 者 高 层 管 理 一 一 React， 与 任何 技术 一 样 ， 是 一 项 有 风险 的 投资 。 但 React 最 终 市 
来 的 生产 力 的 提高 与 思维 负担 的 减轻 党 稼 会 胜 过 为 它 花费 的 时 间 。 这 并 非 所 有 团队 的 情 
况 ， 但 对 大 多 团队 来 说 确实 如 此 。 
总 而 言 之 , React 对 刚 入 职 的 工程 师 来 说 比较 容易 学 习 , 它 可 以 减少 应 用 中 不 必要 的 复杂 性 ， 
还 可 以 通过 促进 代码 复 用 来 减少 技术 债 。 花 点 时 间 回 顾 一 下 到 目前 为 止 了 解 到 的 React。 
国 React 是 一 个 用 来 构建 用 户 界面 的 库 ， 它 最 初 是 由 Facebook 的 工程 师 创 建 的 。 
React 提供 了 一 个 基于 组 件 的 简单 、 灵 活 的 API。 
组 件 是 React 的 基本 单元 ， 在 React 应 用 中 被 广泛 使 用 。 
React 在 程序 和 浏览 器 DOM 之 间 实 现 了 一 个 虚拟 DOM 层 。 
虚拟 DOM 使 用 快速 比 对 算法 对 DOM 进行 高 效 更 新 。 
虚拟 DOM 具有 优秀 的 性 能 ， 但 最 大 的 好 处 是 它 提供 的 思维 模型 。 
既然 已 经 对 React 的 育 景 和 设计 有 了 更 多 了 解 ， 那 么 我 们 就 可 以 对 React 进行 深入 讨论 
在 下 一 草 ， 我 们 将 创建 第 一 个 组 件 并 进一步 了 解 React 是 如 何 工作 的 。 wa se lel 
DOM、React 中 的 组 件 以 及 如 何 创 建 自己 的 组 件 的 知识 。 





第 2 章 <Hello World/> 
我 们 的 第 一 个 组 件 


本 章 主要 内 容 


使 用 组 件 思考 用 户 界 面 
React 中 的 组 件 


_React 中 创建 组 件 的 不 同方 式 


在 React 中 使 用 JSX 


第 1 章 主 要 从 理论 方面 探讨 了 React。 如 果 你 是 “show me the code!” 的 那 类 人 ， 那 本 章 就 是 


为 你 准备 的 。 我们 将 在 本 章 近 距离 审视 React。 随 着 我 们 学 习 React 的 一 些 API, 我 们 将 创建 一 个 
简单 的 评论 框 ， 这 将 有 助 于 读者 理解 React 的 实际 运行 机 制 并 开始 固化 有 关 React 工作 方式 的 思 
维 模型 。 一 开始 ， 我 们 不 会 使 用 任何 “语法 糖 ” 或 可 能 隐藏 底层 技术 的 便利 措施 来 构建 React 组 
件 。 在 本 章 最 后 ， 我 们 将 探讨 JSX ( 一 个 轻 量 级 标记 语言 ， 它 有 肋 于 我 们 更 容易 地 创建 React 组 
件 )。 后 面 几 章 的 内 容 会 更 复杂 ， 我 们 将 了 解 一 下 如 何 用 React 组 件 创 建 一 个 完整 的 应 用 程序 
( Letters Social )， 但 在 本 章 中 ， 我 们 将 把 范围 限制 在 几 个 相关 的 组 件 上 。 


在 深入 探索 之 前 ， 让 我 们 再 简要 地 了 解 一 下 React 以 确定 自己 学 习 的 方 回 。 图 2-1 概括 了 大 


多 数 React 应 用 的 核心 方面 。 


让 我 们 来 看 看 各 个 部 分 。 
图 组 件 一 一 封装 的 功能 单元 ， 这 是 React 的 基本 单元 。 这 些 就 是 制作 视图 的 东西 。 它 们 是 


JavaScript 的 函数 或 类 ， 它 们 接收 属性 作为 输入 并 维护 自己 的 内 部 状态 。React 为 菜 些 类 
型 的 组 件 提供 了 一 组 生命 周期 方法 ， 这 样 就 可 以 将 其 挂 载 到 不 同 的 组 件 管理 步骤 中 。 
React 库 React 应 用 基于 React 库 运行 。React 的 核心 库 ( react ) 由 react-dom 和 
react-native 支持 。React DOM 处 理 浏览 器 或 服务 如 端 环境 中 的 渲染 ，React Native 
则 提供 了 原生 绑 定 ， 这 意味 着 可 以 为 iOS 或 Android 创建 React 应 用 。 

第 三 方 库 一 一 React 不 会 就 数据 建 模 、HTTP 调用 、 样 式 的 特定 领域 ( 如 外 观 和 感觉 ) 或 应 
用 的 其 他 方面 将 观念 强加 给 开发 人 员 。 对 于 这 些 , 使 用 者 可 以 根据 自己 的 意愿 来 集成 其 他 技 
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术 构 建 应 用 。 并 不 是 所 有 库 都 与 React 兼容 ， 但 是 有 很 多 方法 可 以 将 它们 中 的 大 多 数 与 React 
集成 在 一 起 。 我 们 将 在 第 4 章 、 第 10 章 和 第 11 章 探讨 如 何在 React 应 用 中 使 用 非 React 代码 。 

图 运行 React 应 用 一 一 由 组 件 创建 的 React 应 用 运行 在 你 选择 的 平台 上 : Web、 移 动 端 或 原 
生平 台 。 


其 他 JavaScript 
(其 他 模块 、 自 定义 方法 ) 


组 件 ee 








<Component | 
display 
userlD={12}> componentWillReceiveProps 
<OtherComponent/> ® ShoudComponento ae 
属性 <Component> CCompona 
~ componentDidUpdate 
{ "User": { name: "Mark "} a yonentWillUnmount 
内 部 组 件 状态 生命 周期 方法 


应 用 


应 用 代码 组 件 、 样 式 、 实 用 工具 、 业 务 钦 辑 ) 


| React DOM / React- 
Roact Native / React VR 其 他 库 








目标 环境 /平台 
Re ER 
» 二 CiOS、Android 
/ | 
服务 器 VR 设备 ' 
(Node.js) (React VR) | 


I 
I 
| 
1 
U 
} 
\ 


] 


图 2-1 这 是 从 较 高 层面 看 到 的 React， 可 能 你 在 第 1 章 就 见 过 了 。 通 过 React， 可 以 使 用 组 件 构建 
用 户 界面 ， 这 些 界面 可 以 运行 在 浏览 器 上 以 及 iOS 和 Android 这 样 的 原生 平台 上 。React 不 是 一 个 
综合 性 框架 一 一 它 允 许 开 发 人 员 自 由 选择 用 于 数据 建 模 、 样 式 、HTTP 调用 等 的 库 。 可 以 在 
浏览 器 中 运行 React 应 用 ， 并 借助 React Native 在 移动 设备 上 运行 React 应 用 
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2.1 React 组 件 介 绍 


组 件 是 用 React 编写 客户 端 应 用 的 基 
本 单元 。 使 用 者 肯定 会 创建 很 多 组 件 ! 在 
本 章 中 ,我 们 将 引导 亲自 动手 用 组 件 构 建 

一 个 简单 的 评论 框 并 走马 观 花 地 过 一 下 
React。 但 首先 ， 让 我 们 花 点 时 间 来 探索 一 
下 “组 件 化 思维 ”, 看 看 它 将 如 何 造就 评论 
框 。 在 本 书 的 大 部 分 内 容 中 ， 我 们 通常 会 
直接 深入 代码 中 ， 而 不 会 花 太 多 时 间 对 囊 
情 进行 规划 , 但 就 第 一 次 涉足 React 而 言 ， 
我 们 将 做 一 些 规划 来 确保 我 们 的 思维 方式 
是 对 的 。 看 一 下 图 2-2。 

本 书 中 ， 我 们 将 假装 自己 是 一 个 叫 作 
“Letters” 的 虚构 创业 公司 的 雇员 。 我 们 将 创 
建 下 一 代 社 交 网 络 ( 用 户 可 以 在 其 中 发 帖 
子 、 评 论 、 点 赞 一 一 真正 史无前例 的 创新 )。 
本 章 中 , 我 们 将 探索 作为 公司 潜在 技术 选择 
的 React。 我 们 的 任务 是 创建 一 组 简单 的 组 
件 来 感受 一 下 这 项 技术 。 我 们 有 一 些 设计 团 
队 给 的 非常 粗略 的 原型 , 但 仅 此 而 已 。 图 2-3 
展示 了 将 要 创建 的 东西 的 一 个 优美 版 本 。 

我 们 将 如 何 开始 创 建 这 个 页 面 呢 ? 让 
我 们 先 了 解 一 下 应 用 所 需要 的 数据 , 然后 看 
看 如 何 将 其 转换 为 组 件 。 如 何 将 原型 转换 为 
组 件 ? 我 们 完全 可 以 在 对 React 一 无 所 知 的 
情况 下 一 头 扎 下 去 ， 并 开始 尝试 创建 组 件 ， 
但 如 果 不 了 解 它 们 的 工作 机 制 或 者 它们 的 
用 途 ， 最终 可 能 会 创建 出 一 团 糟 或 不 合 平 
React 的 东西 。 我 们 将 在 接 下 来 的 几 节 中 做 
一 些 规划 ,以 便 对 如 何 构 造 和 设计 评论 框 有 
更 深 的 理解 。 


练习 2-1 界面 拆 解 回顾 


”继续 之 前 a 3 我们 二 看 一 识 


其 他 JavaScript 
(其 他 模块 ， 自 定义 方法 ) 














| <Component 
display 
| userlD={12}> componentWillReceiveProps 
/ <OtherComponent/> BShomconpoe 
属性 <Component> omponent pdate 
| 
| 


{user": {name: "Mark')}} wna ome 





生命 周期 方法 
2-2 ”React 组 件 概 览 。 我 们 将 在 本 书 的 
其 余部 分 探索 这 些 关 键 部 分 


内 部 组 件 状态 


Letters|Social 





如 果 我 们 希望 做 事 得 心 应 手 ， 那 必须 首先 学 会 辛勤 付出 。 
尔 : 约翰 逊 


Haley 和 Annmarie 喜 欢 


塞 纱 尔 : 约翰 逊 对 我 来 说 太 主流 了 。 


Peter 评 论说 
谁 是 塞 纱 尔 : 约翰 还? 














. 
2 SS 
\ 


Mitchell 评 论说 
(Q@Peter 放下 Letters 去 写作 业 ! 


Peter 评 论说 


四 Mitchell 好 吧 老 爸 :P 








2-3 粗略 的 评论 框 原型 。 我 们 将 创建 一 个 UI， 
用 户 可 以 在 其 中 给 帖子 添加 评论 并 查看 以 前 的 评论 


Veb 界 并 花 时 间 自 a 


现在 ， 花 点 时 间 重新 查看 一 下 那个 界面 ， 看 看 在 对 React 的 组 件 有 了 更 多 了 解 后 , 是 否 会 有 不 同 的 做 法 。 
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你 会 采取 不 同 的 分 组 吗 ? 下 面 用 一 个 标记 过 的 GitHub 用 户 档案 界面 来 响起 我 们 的 回忆 。 
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Pinned repositories 


= react-in-action/letters-social = react-testing-components-enzyme 


Sample project for Re nm ACHOr Sample repo for a bilog post on testing rea3ct Co 
https’/ BC 


Mark Thomas 
markthethomas = dockerizing-nodejs-app = environs 


Simple ap monstrating how to “dockerize' a simple simple tools for inspecting environment 


ftware engineer 
Software engineer @FloQast node.js app 


Author for Manning 
(@react-in-action) JavaScrip! 5 1 JavaScript 会 4 
Edit bio 


= redis-kue-axpress = netflix workshop 


i @F| i C Sample code for a tutorial on Using Kue, Redis, and Notes and code trom an async workshop taught by Jafar 
@ ast, @react-in-action Express Husam at Netflix 
WwW Los Angeles 


区 JavaScript 会 11 Ws JavaScript 5 
5 https://ifelse.io 有 ipt 让 


Organizations 


1,590 contributions in the last year Contribution settings v 
> 器) | 
n gp) 人 May if jul AGO ban Oc Nov 0 J8r Pet Mar 
卫 因 有 


Learn Now We Count contnbutions 


/ 
| 
: 


Contribution activity 





2.1.1 ”理解 应 用 数据 


在 规划 如 何 组 织 组 件 之 前 , 除了 原型 , 我 们 还 需要 其 他 一 些 东西 。 我 们 需要 知道 API 会 给 应 
用 提供 什么 信息 。 基 于 原型 我 们 可 能 已 经 猜 到 了 一 些 能 获取 到 的 数据 。 在 开始 创建 UI 之 前 ， 了 
解 应 用 的 数据 形式 将 是 我 们 进行 规划 的 重要 组 成 部 分 


Web API 
人 们 可 能 在 工作 或 学 习 中 经 常 听 到 API 这 个 术语 。 如 果 已 经 很 熟悉 这 个 概念 ， 随 意 跳 过 这 个 部 分 。 
ee ne 组 构建 软件 的 例 程 
议 。 这 听 起 来 可 能 很 含糊 ， 而 且 这 是 一 个 相当 第 统 的 定义 。APl 是 一 个 宽泛 的 术语 ， 适 用 于 从 公司 
库 的 所 有 东西 。 4 es 
”在 Web 开发 和 工程 中 ，AP| 几乎 已 经 成 为 基于 Web 的 远程 公共 API 的 同义词 。 这 意味 着 AP| 通常 
是 一 种 向 外 部 暴露 程 序 或 平台 交互 方式 的 清 青 晰 的 办 法 ， 通 常 通 过 互联 网 ， 供 人 们 使 用 和 消费 。 这 样 的 例 
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子 非常 多 ， 但 两 个 最 广为人知 的 是 Facebook dt 的 Cs 它们 提供 了 一 组 通过 Web et 
据 进行 交互 的 方法 。 2， 0 

Letters 公司 ( 我 们 虚构 的 公司 ) 的 后 并 团队 他 娃 pe 的 API 供 人 使 用 。 基于 Web 的 API 1 有 许多 
不 同 的 形式 和 种 类 ， 在 本 书 中 使 用 的 这 个 API 是 一 个 REST 风格 的 JSON API。 这 意味 着 服务 器 会 返回 JSON 
格式 的 数据 而 且 可 用 的 数据 是 围绕 着 人 Users、posts、comments 等 这 样 的 资源 进行 组 织 的 。REST 风格 的 


JSON AP| 是 远程 AP| 的 常见 形式 ， 因 此 如 果 你 还 没有 用 过 的 话 ， 这 应 该 不 会 是 你 唯一 一 次 使 用 它 。 


代码 清单 2-1 展示 了 评论 框 通过 API 接收 到 的 数据 的 一 个 例子 以 及 它 是 如 何 与 原 型 匹配 的 。 














代码 清单 2-1 JSON API 示例 





| 这 个 没有 在 原型 中 出 现 , 但 这 并 不 


代表 不 需要 这 项 数据 
"es 2 
"content": "What we hope ever to do with ease, we must first learn to do 
with diligence. 一 Samuel Johnson", 
| 
"name": "Mark Thomas", 
"id": 1 -~ 接收 到 一 组 评 
}, | 和 
voaonumentes"s | 
"1 a oq 
WaSerrs VDavid, ”| 评论 也 有 ID 
"content": "too. mainstream." 
Fy 
hs 
"user": "Peter"™, 
"content": "Who was Samuel Johnson?" 
上 
i 
"EE" "MiICONeLl”; 
"content": "@Peter get off Letters and do your homework!" 
jy 
els 3 
"ser": "Peter”™, 
"Eontent"s mitchell ok Cad :BP” 


}] 
} 


这 个 API 返回 了 一 个 包含 单个 帖子 的 JSON 响应 。 它 有 一 些 重要 属性 ,包括 id、content、 
user 和 comments。id 是 一 个 数字 ，content 和 user 是 字符 串 ， 而 comments 是 一 个 对 象 


数组 。 每 条 译 论 都 有 上 自己 的 ID 、 发 表 评 论 的 用 户 以 及 评论 的 内 容 。 


2.1.2 多 组 件 : 组 合 关 系 和 父子 关系 


我 们 已 经 有 需要 的 数据 和 原型 , 但 要 如 何 着 手打 造 使 用 这 些 数据 的 组 件 呢 ? 例如 , 我 们 需要 
知道 组 件 如 何 与 其 他 组 件 组 织 到 一 起 。React 的 组 件 被 组 织 成 一 个 树 形 结构 。React 的 组 件 像 DOM 
元 素 一 样 ， 也 可 以 内 套 而 且 能 够 包含 其 他 组 件 。 它 们 也 可 以 出 现在 其 他 组 件 “ 旁 边 ”， 这 表示 它 
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们 可 以 与 其 他 组 件 出 现在 相同 的 层级 上 ( 见 图 2-4 )。 





独立 组 件 


独立 组 件 









SS 组 件 
| 


图 2-4 组 件 可 以 拥有 不 同类 型 的 关系 ( 父 与 子 )， 既 可 以 用 来 创建 其 他 组 件 ， 也 可 以 独立 存在 。 
因为 它们 独立 且 移 动 时 不 市 任何 负担 ， 所 以 它们 常常 易于 移动 。 由 此 ， 它 们 被 认为 是 可 组 合 的 


这 珊 来 了 一 个 重要 问题 : 组 件 有 哪些 种 类 的 关系 。 人 们 可 能 认为 使 用 组 件 能 够 创建 相当 多 不 
同 种 类 的 关系 ， 从 某 种 意义 上 说 ， 这 是 对 的 。 但 组 件 能 够 以 灵活 的 方式 被 使 用 。 因 为 组 件 独立 且 
常常 不 带 任何 “负担 ”， 所 以 它们 被 认为 是 可 组 合 的 。 

可 组 合 的 组 件 通常 易于 移动 并 且 能 够 通过 复 用 来 创造 其 他 组 件 。 我们 可 以 把 它们 想象 成 乐高 
积木 。 每 个 乐高 积木 都 是 独立 自主 的 , 所 以 它 能 够 很 容易 地 移动 一 一 没 必 要 为 了 一 块 积木 而 携带 
一 整 组 积木 一 一 它 很 容易 与 其 他 组 件 相 适应 。 虽然 可 移植 性 并 非 终 极目 标 ; 但 它 常 常 是 精心 设计 
的 React 组 件 的 特色 。 

因为 组 件 是 可 组 合 的 ， 所 以 可 以 在 应 用 的 许多 地 方 使 用 。 无论 在 哪里 使 用 组 件 , 都 可 能 形成 
某 种 特定 的 关系 : 父 与 子 。 如 果 一 个 组 件 包含 男 一 个 组 件 ， 则 它 被 认为 是 父 组 件 。 一 个 组 件 在 男 
一 个 组 件 中 ， 则 它 被 认为 是 子 组 件 。 同 一 层次 上 的 组 件 不 具有 任何 直接 关系 ,即便 它们 可 能 就 在 
彼此 劳 边 。 组 件 只 “关注 ”它们 的 父母 和 孩子 。 

图 2-4 展示 了 组 件 如 何以 父子 方式 彼此 关联 以 及 如 何 组 合 在 一 起 创建 新 组 件 。 注 意 到 ， 尽 管 
有 直接 的 父子 关系 ,但 两 个 兄弟 组 件 之 间 却 缺乏 直接 关系 ， 我 会 在 探索 React 的 数据 流 时 再 涵盖 
这 方面 的 更 多 内 容 。 





2.1.3 ”建立 组 件 关 系 


我 们 了 解 了 界面 的 数据 和 视觉 外 观 以 及 组 件 形 成 的 父子 关系 。 现 在 , 我 们 可 以 开始 定义 自己 
的 组 件 层次 结构 , 这 是 应 用 目前 所 学 东西 的 过 程 。 我 们 将 确定 组 件 的 内 容 以 及 它 的 位 置 。 建 立 组 
件 关 系 的 过 程 对 每 个 团队 或 项 目 而 言 并 非 千 篇 一 律 。 组 件 关系 也 可 能 随时 间 而 变化 , 所 以 不 要 期 
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望 第 一 次 建立 就 完美 。 更 容易 的 UI 迭代 恰恰 是 React 的 使 用 让 人 愉快 的 部 分 原因 。 
在 我 们 继续 之 前 先 花 一 两 分 钟 尝试 将 原型 分 解 为 组 件 。 虽然 到 目前 为 止 已 经 做 过 几 次 分 解 ， 
但 只 有 练习 用 组 件 的 方式 思考 才能 让 使 用 React 更 为 容易 。 当 练习 时 ， 谨 记 如 下 事项 。 
加 确保 组 件 以 合理 的 方式 组 织 到 一 起 。 组 件 应 该 围绕 相关 联 的 功能 进行 组 织 。 如 果 几 乎 无 
法 在 应 用 中 移动 组 件 ， 那 么 可 能 正在 创建 一 个 过 于 死板 的 层次 结构 。 虽 然 情况 并 非 总 是 
如 此 ， 但 最 好 注意 一 点 儿 。 
加 如 果 发 现 有 一 个 界面 元 素 重复 出 现 多 次 ， 那 么 这 个 界面 元 素 通常 是 成 为 组 件 的 好 选择 。 
加 ”如果 没有 第 一 次 就 把 所 有 事情 都 搞 好 ， 这 没什么 。 通 常 要 迭代 地 改进 代码 。 最 初 的 计划 
并 不 会 消除 未 来 的 变更 ， 但 会 设置 合适 的 开始 方向 。 
记 住 这 些 指 导 方针 , 可 以 查看 现 有 数据 和 原型 并 开始 把 它们 分 解 为 一 些 组 件 。 图 2-5 展示 了 
一 种 将 界面 分 解 为 组 件 的 方式 。 


Letters|Social 
评论 框 组 件 


| 


一 一 一 一 一 一 一 一 一 一 一 一、 


如 果 我 们 希望 做 事 得 心 应 手 ， 那 必须 首先 学 会 辛勤 付出 。 | 
一 一 塞 雏 尔 .约翰逊 


帖子 组 件 
人 SA | eh 


塞 织 尔 : 约翰 了 还 对 我 来 说 太 主流 了 。 


Peter 评 论说 









评论 区 组 件 





| | 
创建 评论 组 件 


发 表 评论 … | 





图 2-5 可 以 将 界面 分 解 为 几 个 组 件 。 注 意 ， 虽 然 随 着 应 用 的 增长 而 将 更 多 部 分 分 解 为 组 件 是 合情合理 的 ， 
但 是 没 必 要 为 界面 的 每 一 个 元 素 都 创建 组 件 。 再 者 ， 注 意 相同 的 评论 组 件 被 用 于 一 个 帖子 的 每 个 
评论 上 。 还 要 注意 到 ， 我 为 了 可 读 性 而 将 这 些 画 在 了 边 上 ,但 有 些 人 可 能 会 直接 画 在 原型 上 


使 用 React 可 以 灵活 地 设计 应 用 。 虽 然 我 们 只 给 出 了 4 个 组 件 , 但 你 可 以 用 很 多 方法 来 分 解 


26 第 2 章 <Hello World/>: 我 们 的 第 一 个 组 件 


这 些 组 件 。React 在 组 件 之 间 强 制 建立 起 父子 关系 ， 但 除 此 之 外 ， 人 们 可 以 用 最 适合 目 己 和 自己 
团队 的 方法 自由 地 定义 层次 结构 。 例 如 ， 有 些 情况 下 ， 人 们 会 把 UI 的 一 小 部 分 分 解 为 许多 不 同 
组 件 。UI 的 规模 与 组 成 它 的 组 件 是 多 是 少 并 没有 直接 关系 。 

既然 我 们 做 了 一 些 初步 规划 ， 就 可 以 投身 进去 开始 创建 评论 框 UI 了 。 在 接 下 来 的 一 节 中 ， 
我 们 将 开始 创建 React 组 件 。 用 不 着 任何 像 JSX 这 样 的 语法 助手 。 相反, 我 们 将 着 重 于 “原生 的 ” 
React， 但 在 寻求 使 用 这 些 助手 之 前 我 们 要 先 了 解 该 技术 的 核心 机 制 。 

人 们 可 能 会 因为 不 得 不 放弃 使 用 那些 常规 React 开发 中 所 用 的 辅助 工具 而 倍 感 诅 形 。 而 我 对 
此 却 感 到 高 兴 , 因为 这 表示 使 用 者 对 将 要 使 用 的 这 些 抽 象 更 为 真切 地 欣赏 和 理解 。 虽 然 情 况 并 非 
总 是 如 此 ， 但 依 我 的 经 验 看 来 ， 从 一 项 新 技术 的 底层 元 素 起 步 通 常 让 人 能 够 更 好 地 长 期 使 用 它 。 
当然 ， 我 们 不 需要 用 汇编 代码 写 JavaScript 程序 ， 但 我 们 也 不 想 在 对 一 项 技术 的 核心 机 制 一 知 半 
解 的 情况 下 使 用 该 技术 。 


2.2 用 React 创建 组 件 


在 这 一 部 分 , 我 们 会 创建 一 些 React 组 件 并 在 浏览 器 中 运行 它们 。 目 前 , 还 不 需要 使 用 Node.js 
或 其 他 东西 来 搭建 和 运行 这 一 切 。 可 以 用 CodeSandbox 在 浏览 器 中 运行 代码 。 如 果 更 喜欢 在 本 地 
编辑 文件 ， 可 以 点 击 CodeSandbox 代码 编辑 器 的 Download 来 获取 该 示例 的 源 代码 。 

第 一 个 组 件 将 会 用 到 3 个 库 : React 、React DOM 和 Prop-types。React DOM 是 React 的 
演 染 毅 ， 它 从 React 主 库 分 离 出 来 以 便 更 好 地 分 离 关 注 点 。 它 将 组 件 泻 染 为 DOM 或 者 处 理 为 服务 
需 冰 泻 染 的 字符 串 。Prop-types 库 是 一 个 开发 库 ， 它 可 以 帮 你 对 传递 给 组 件 的 数据 做 类 型 检查 。 

要 开始 创建 评论 框 组 件 ， 得 先 创建 一 些 组 成 部 分 ， 这 将 帮助 我 们 更 好 地 了 解 当 React 创建 和 
演 染 组 件 时 会 发 生 什么 。 我 们 需要 添加 一 个 ID 为 root 的 新 DOM 元 素 以 及 一 些 使 用 React DOM 
的 基本 代码 。 代 码 清单 2-2 展示 了 组 件 的 起 点 。 我 为 每 个 代码 清单 提供 了 一 个 在 线 运行 版 本 的 链 
接 ， 可 以 很 容易 地 编辑 和 尝试 。 


代码 清单 2-2 起步 








fis Lhdex. ja 保存 根 元 素 的 引用 React 应 用 
const node = document .getElementByYyId("Loot") ; 会 被 演 染 到 这 个 DOM 元 素 中 
//... index.html 在 index.html 文件 中 创建 了 


div Tod="rOoOt S/dLY> . 
一 个 id 为 root 的 div 


代码 清单 2-2 的 在 线 代码 位 于 https://codesandbox.io/s/vj9xkqzkvy。 


2.2.1 创建 React 元 素 
到 目前 为 止 ， 代 码 除 了 下 载 React 库 和 查找 id 为 root 的 DOM 元 素 并 没有 做 什么 事情 。 
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如 果 要 实现 一 些 实质 性 的 东西 ， 需 要 使 用 React DOM。 我 们 需要 调用 React DOM 的 render 
方法 来 让 React 创建 和 管理 组 件 。 要 使 用 需要 泻 染 的 组 件 和 容器 〈 就 是 之 前 变量 保存 的 DOM 元 
素 ) 来 调用 这 个 方法 。ReactDOM. rendet 的 签名 看 起 来 像 这 样 : 


ReactDOM. render 人 
ReactElement element, 
DOMElement container, 
[function callback] 

) -> ReactComponent 


React DOM 需要 一 个 ReactElement 类 型 的 元 素 和 一 个 DOM 元 素 。 我 们 已 经 创建 了 一 
个 能 够 使 用 的 有 效 DOM 元 素 ， 现 在 需要 创建 一 个 React 元 素 。 但 React 元 素 是 什么 ? 


定义 ”React 元 素 是 React 中 轻 量 、 无 状态 、 不 可 变 的 基础 类 型 。React 元 素 有 ReactComponent- 
Element 和 ReactDOMElement 两 种 类 型 。ReactDOMElement 是 DOM 元 素 的 虚拟 表示 。 
ReactComponentElement 引用 了 对 应 着 React 组 件 的 一 个 函数 或 类 。 


元 素 是 描述 符 ， 我 们 用 它 来 告诉 React 我 们 想 要 在 屏幕 上 看 到 什么 ， 它 是 React 中 的 核心 概 
.大 多 数组 件 是 React 元 素 的 集合 。 它 们 会 围绕 UI 的 一 部 分 创建 一 个 “边界 ”， 以 便 能 够 将 功 
EE、 标 记 和 样式 组 织 到 一 起 。 但 就 React 元 素 是 DOM 元 素 的 虚拟 表示 而 言 ， 这 意味 着 什么 呢 ? 
这 意味 着 ，React 元 素 之 于 React 如 同 DOM 元 素 之 于 DOM 一 一 React 元 素 是 构成 UI 的 基础 类 型 。 
当 创 建 普通 HTML 标记 时 ， 会 使 用 各 种 各 样 的 元 素 类 型 (div、span、section、p、img 等 ) 
来 包含 和 组 织 信息 。 在 React 中 ,可 以 使 用 React 元 素 一 一 它 将 想 演 染 的 React 组 件 或 常规 DOM 
元 素 告诉 React 来 组 成 和 构建 UI。 

也 许 DOM 元 素 和 React 元 素 之 间 的 相似 性 没有 立即 点 化 你 。 没 有 问题 。 还 记得 React 

要 如 何 通过 创造 一 个 更 好 用 的 思维 模型 来 帮助 使 用 者 ?” DOM 元 素 和 React 元素 之 间 的 相似 性 
是 达成 此 目的 的 一 种 方法 。 这 意味 着 使 用 者 得 到 了 一 种 可 用 的 熟悉 的 思维 结构 : 一 种 与 常规 
DOM 元 素 相似 的 元 素 的 树 形 结构 。 图 2-6 可 视 化 了 React 元 素 与 DOM 元 素 之 间 的 一 些 相 似 
之 处 。 


\ 


ED 


TO 





-| 由 DOMElement 组 成 





图 2-6 ”虚拟 和 “实际 ”DOM 有 着 相似 的 树 状 结构 ， 这 使 得 使 用 者 可 以 很 容易 地 用 
相似 的 方式 思考 React 中 的 组 件 结构 和 整个 应 用 的 结构 。DOM 由 DOMEIlement 
( HTMLEIement 和 SVGElement ) 组 成 ， 而 React 的 虚拟 DOM 由 React 的 元 素 组 成 
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另 一 种 思考 React 元 素 的 方式 是 将 其 当 作 提 供给 React 使 用 的 一 组 基本 指令 ， 就 像 DOM 元 
素 的 蓝图 (blueprint ) 一 样 。React 元 素 是 React DOM 接收 并 用 来 更 新 DOM 的 东西 。 图 2-7 展 
示 了 React 元 素 在 React 应 用 的 整个 过 程 中 被 使 用 的 情况 。 








em 本 时 本 本 要 虚拟 DOM 实际 DOM 
| React 元 素 


| React DOM ee 和 a 


到 2-7 ”React 使 用 React 元 素来 创建 虚拟 DOM, React DOM 管理 和 使 用 虚拟 DOM 来 协调 和 
更 新 实际 DOM。 它 们 是 React 用 来 创建 和 管理 元 素 的 简单 蓝图 


现在 对 React 元 素 的 基本 知识 有 了 更 多 了 解 , 但 它们 是 如 何 被 创建 出 来 的 以 及 创建 它们 需要 
什么 ? React .createElement 被 用 来 创建 React 元 素 一 一 想到 了 吧 ! 让 我 们 看 看 它 的 函数 签 
名 ， 了 解 应 该 如 何 使 用 它 : 


React.createElement ( 
String/ReactClass type, 
[objeet Brops], 
[ehilierer, ss | 

) -> React Element 


React .createElement 接收 字符 串 或 组 件 (要 么 是 扩展 了 React .Component 的 类 ， 
要 么 是 一 个 函数 )、 属 性 (props ) 对 象 和 子 元 素 集合 (children ) 并 返回 一 个 React 元 素 。 
记 住 ，React 元 素 是 你 想 让 React 演 染 的 东西 的 轻 量 级 表示 。 它 可 以 表示 一 个 DOM 元 素 或 
者 另 一 个 React 组 件 。 

让 我 们 更 仔细 地 看 一 下 这 些 基 本 指令 。 

国 type 可 以 传人 一 个 表示 要 创建 的 HTML 元 素 标 签名 的 字符 串 ( "div"、"span"、 
"a" 等 ) 或 一 个 React 类 ， 我 们 很 快 就 会 看 到 。 把 这 个 参数 当 作 React 在 问 ,“ 我 要 创建 
什么 类 型 的 东西 ? ” 

国 props properties ( 属性 ) 的 缩写 。props 对 象 提供 了 一 种 方法 , 指定 HTML 元 素 上 
会 定义 哪些 属性 ( 如 果 是 在 ReactDOMElement 的 上 下 文中 ) 或 组 件 类 的 实例 可 以 使 用 
哪些 属性 。 

国 children... 怎么 说 React 组 件 是 可 组 合 的 吗 ? 这 就 是 能 够 进行 组 合 的 
所 在 。 children... 是 type 和 props 之 后 传人 的 所 有 参数 ， 它 让 使 用 者 能 够 进行 艇 套 、 
排序 ， 甚 至 进一步 般 套 其 他 React 元 素 。 如 在 代码 清单 2-3 中 所 见 ， 能 够 通过 在 
children... 内 部 舱 套 调用 React . createElement 来 能 套 React 元 素 。 

React .createElement 问 “ 我 在 创建 什么 ?””“ 我 怎么 配置 它 ? ”“ 它 包含 什么 ?””。 代 码 

清单 2-3 展示 了 React .createElement 的 使 用 方法 。 
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代码 清单 2-3 使 用 React.createElement 





import React, { Component } from ‘react'"; PS 引入 React 和 React DOM 以 供 使 用 


Import { render 上 '‘'react-dom'; 、 二 = 
t.createElement 返回 单 素 ,， 而 
const node = document .getElementById('root'); ReactcreateBlement 上 广 React 元 


ES 这 正 是 存储 在 root 中 供 以 后 使 用 的 东西 
React .CreateElLlement ('divy', {}, // 

React .createElement ('hli’', {}, "Hello, world!i™, /I/ 

React.createElement('a', {href: 'mailto:mark@ifelse.io'}, 








React .createElement ('hl1l', {}, "React In Action"), 
React.createElement('em', {}, "...and now it really is!") 
) 内 部 文本 也 可 以 传 给 children.… | 
)? 
render (root, node); // 创建 一 个 链接 一 一 注意 设置 的 mailto 属 
se lg cy ， 职 常规 HTML 中 所 4 局 

mt 性 ， 就 像 在 常规 HTML 中 所 做 的 那样 
过 的 render 方法 


空格 更 好 地 展示 了 藤 套 ,但 切 勿 搞 混 是 如 何在 各 自 的 
children... 参 数 中 骸 套 几 个 React.createElement 调用 的 
代码 清单 2-3 的 在 线 代 码 位 于 https://codesandbox.io/s/qxx7z86q4w。 


2.2.2 泻 染 首 个 组 件 


如 图 2-8 所 示 ， 现 在 应 该 能 够 看 到 空白 页 之 外 的 东西 。 我 们 刚刚 创建 了 第 一 个 React 组 件 ! 
使 用 浏览 器 的 开发 者 工具 ， 尝试 打 开 这 个 页 面 并 查看 HTML ， 应 该 会 看 到 与 使 用 React 所 创建 的 
元 素 相对 应 的 HTML 元 素 。 注 意 , 传人 的 属性 也 已 经 成 功 就 位 ， 可 以 点 击 链 接 ， 给 我 发 封 邮 件 ， 
告诉 我 你 是 多 么 热爱 学 习 React。 





| 
Hello, world! 


React In Action 


| .nd now it really is! 





2-8 ”第 一 个 组 件 。 它 哩 不 大 ， 但 我 们 已 经 成 功 使 用 React 创建 了 一 个 组 件 
这 太 棒 了 ， 不 过 大 家 也 许 想 知道 React 是 怎么 把 这 么 多 React .createElement 转换 成 可 
以 在 屏幕 上 看 到 的 东西 的 .React 使 用 我 们 提供 的 React 元 素来 创建 React DOM 管理 浏览 吉 DOM 
时 所 使 用 的 虚拟 DOM。 还 记得 图 2-6 中 虚拟 DOM 和 真实 DOM 有 相似 的 结构 吗 ? 好 吧 , 在 React 
能 够 发 挥 作用 之 前 ， 它 需要 从 React 元 素 中 形成 自己 的 虚拟 DOM 树 结构 。 
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要 做 到 这 一 点 ，React 会 递归 地 对 每 个 React .createElement 调用 的 全 部 children... 
属性 进行 求 值 ， 并 将 结果 传递 给 父 元 素 。 可 以 把 React 的 这 个 做 法 想象 成 一 个 小 孩 反 复 在 问 “X 
是 什么 ? ”， 直 到 他 理解 了 针 的 每 个 小 细节 。 图 2-9 展示 了 React 对 骨 套 的 React 元 素 进行 求 值 的 
方法 。 沿 箭头 向 下 ， 而 后 向 右 来 查看 React 是 如 何 检查 每 个 React 元 素 的 children.…. 和 直到 它 能 
够 形成 一 棵 完整 的 树 。 








我 在 创建 什么 ? 入 您 么 本 暑 ' 它 它 包含 什么 ? 
Te 
se 
React.createElement(string | ReaciClass, props, children) 
React.createElement(string | ReactClass, props, children) 


React.createElement(stnng | ReaciClass, props, 


React.createElement(string | ReaciClass, props, children,) 


React.createElement(string | ReactClass, props, children) 


React.createElement(string | ReactClass, props, children) 





图 2-9 ”React 会 递归 地 对 一 系列 React 元 素 进 行 求 值 来 确定 它 应 该 如 何 为 组 件 形成 虚拟 DOM 树 。 
它 还 会 检查 children... 中 的 更 多 React 元 素来 进行 求 值 。React 会 遍历 所 有 可 能 路 径 ， 就 像 一 个 
孩子 在 问 ,“X 是 什么 2 “， 直 到 他 们 了 解 了 所 有 事情 。 可 以 沿 箭头 向 下 而 后 向 右 来 了 解 
React 对 其 套 React 元 素 求 值 的 方式 以 及 每 个 参数 在 问 什么 


现在 我 们 已 经 创建 了 第 一 个 组 件 , 大 家 也 许 会 有 一 些 问题 ,甚至 一 些 顾虑 。 即 便 有 一 些 格式 
化 的 帮助 , 很 明显 , 浏览 只 般 套 几 层 的 组 件 也 是 困难 重重 ,我们 将 会 探索 更 好 的 方法 来 编 与 组 件 ， 
所 以 不 用 担心 一 一 不 会 数 百 次 地 和 散 套 React . createElement。 现 在 使 用 能 套 可 以 更 好 地 理解 
React .createElement 做 了 什么 ， 并且 在 开始 大 量 使 用 React .createElement 时 ,使 用 
舱 套 可 能 有 助 于 你 欣赏 JSX。 

et ne 到 目前 为 止 ，React 看 上 去 就 像 是 一 个 见长 









mm 
mnt 


的 一作 
种 DOM 元 素 (div、a、P 等 ja 
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可 以 通过 props 对 象 为 React 元 素 提 供 配 置 。 ed DO M1 元素 则 属性 ( 妇 
eae te | 
”时 React 元 素 是 可 航 套 的 ， 可 以 将 其 他 React 元 素 作为 某 个 元 素 的 子 元 素 。 
”React 使 用 React 元 来 创建 虚拟 DOM。 3 React 更 新 浏览 poM 时 ， React | po 
de > 
: :| React 元 素 是 React 中 构成 组 件 的 东西 。 







2.2.3 创建 React 组 件 


正如 已 经 知道 的 ， 除 了 管理 DOM， 只 用 React 元 素 和 React .createElement 创建 用 户 
界面 并 无 太 大 帮助 。 使 用 者 仍 可 以 将 事件 处 理 需 作为 属性 传人 来 处 理 点 击 或 输入 变化 , 传人 其 他 
数据 进行 展示 ， 其 至 租 套 元 素 。 但 你 仍 会 想念 React 所 提供 的 持久 状态 、 让 人 以 可 预见 的 方式 处 
理 组 件 的 生命 周期 方法 ， 以 及 组 件 能 够 提供 的 任何 形式 的 逻辑 分 组 。 你 肯定 想 找 一 种 方法 把 React 
元 素 组 织 在 一 起 。 

我 们 可 以 用 组 件 做 到 这 些 。 组 件 有 助 于 将 功能 、 标 记 、 样 式 和 其 他 UI 相关 的 资料 打包 和 组 
织 在 一 起 。 它 们 充当 了 UI 组 成 部 分 的 某 种 边界 并 上 且 还 能 包含 其 他 组 件 。 组 件 可 以 是 独立 可 复 用 
的 部 分 ， 能 够 让 人 独立 地 思考 每 个 部 分 。 

我 们 可 以 使 用 函数 和 JavaScript 类 创建 两 种 基本 类 型 的 组 件 。 我 将 在 后 续 草 市 中 探讨 第 一 种 
类 型 一 一 无 状态 函数 组 件 。 现 在 , 我 将 讨论 第 二 种 类 型 : 使 用 JavaScript 类 创建 的 有 状态 的 React 
组 件 。 从 现在 起 ， 当 我 提 及 React 组 件 时 ， 我 指 的 是 由 类 或 者 函数 创建 的 组 件 。 


2.2.4 创建 React 类 


要 开始 真正 地 构建 东西 ， 需 要 的 不 只 是 React 元 素 ， 还 需要 组 件 。 如 前 所 述 ，React 组 件 〈 创 
建 自 函数 的 组 件 ) 就 像 是 React 元 素 ， 但 React 组 件 拥有 更 多 特性 。React 中 的 组 件 是 帮助 将 React 
元 素 和 图 数组 织 到 一 起 的 类 。 它 们 可 以 被 创建 为 扩展 和 目 React .Component 基 类 的 类 或 是 函数 。 
本 节 将 探索 React 的 类 以 及 如 何在 React 中 使 用 这 种 类 型 的 组 件 。 让 我 们 看 看 如 何 创 建 React 的 类 。 


class MyReactClassComponent extends Component { 
render() {} 


} 


与 使 用 React .createElement 时 调用 React 库 中 的 特定 方法 不 同 ， 由 React .Component 
创建 组 件 是 通过 声明 一 个 继承 自 React.Component 抽象 基 类 的 JavaScript 类 来 实现 的 。 这 个 继承 
类 通常 需要 至 少 定 义 一 个 render 方法 ,这 个 rendez 方 法 会 返回 单个 React 元 系 或 是 一 个 React 
元 素 的 数组 。 创 建 React 类 的 老 办 法 是 使 用 createCclass 方法 。 这 种 方式 随 着 JavaScript 的 类 
的 到 来 而 发 生 了 改变 ， 虽然 我 们 仍旧 能 使 用 create-react-class 模块 (npm 上 仍然 提供 )， 
但 现在 这 不 是 被 敦 励 的 方式 。 
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2.2.5、render 方法 


我 们 开始 探索 前 面 提 到 的 用 带 有 render 方法 的 React 类 创建 组 件 。 这 是 在 React 应 用 中 最 
常 看 到 的 方法 之 一 , 并 且 几 乎 任何 向 屏幕 显示 内 容 的 组 件 都 带 有 render 方法 。 我 们 最 终 会 探索 
那些 不 直接 显示 任何 东西 而 是 修改 或 增强 其 他 组 件 的 组 件 (有 时 被 称 为 高 阶 组 件 )。 

render 方法 需要 只 返回 一 个 React 元 素 。 从 这 一 点 看 来 ，render 方法 与 React 元 系 的 创 
建 方 法 相似 一 一 它们 可 以 符 套 但 最 高 层 只 有 一 个 节点 。 然 而 ， 与 React 元 素 不 同 的 是 ，React- 类 
的 render 方法 可 以 访问 内 租 数 据 (持久 化 的 内 部 组 件 状 态 )， 以 及 组 件 方 法 和 继承 日 
React .Component 抽象 基 类 的 其 他 方法 ( 我 将 会 探讨 所 有 这 些 内 容 )。 我 所 说 的 持久 化 状态 对 
整个 组 件 都 是 可 用 的 ， 因 为 React 为 这 种 类 型 的 组 件 创建 了 一 个 “支撑 实例 ”。 这 也 是 你 会 听 到 
将 这 种 类 型 的 组 件 称 为 有 状态 组 件 的 原因 。 

这 一 切 意味 着 React 会 为 React 类 的 实例 (不 是 蓝图 本 身 ) 创建 并 追踪 一 个 特殊 的 数据 对 象 ， 
这 个 对 象 随时 间 保 持 存 在 并 可 以 通过 特定 的 React 困 数 进行 更 新 。 我 会 在 后 续 章 节 更 深 入 地 探讨 
这 些 内 容 ， 由 图 2-10 可 知 ，React 类 有 支撑 实例 而 React 元 素 没有 。 


rm 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


和 


ReactElement 


2-10 ”React 在 内 存 中 为 按 React 组 件 类 方式 创建 的 组 件 创建 了 支撑 实例 。 正 如 所 见 ，React 组 件 
类 得 到 了 一 个 支撑 实例 ， 而 React 元 素 和 非 React 类 组 件 却 没有 。 记 住 ，React 元 素 是 DOM 的 
镜像 而 组 件 是 将 它们 组 织 在 一 起 的 方法 。 支 撑 实 例 是 一 种 为 特定 组 件 提供 数据 存储 和 访问 的 
方法 。 存 储 在 该 实例 中 的 数据 会 通过 特定 的 API 方法 被 提供 给 组 件 的 render 方法 。 

这 意味 着 使 用 者 可 以 访问 能 够 改变 和 随时 间 持 久 化 的 数据 


当 使 用 React 类 创建 组 件 时 , 也 可 以 访问 属性 一 一 能 够 将 该 数据 传 入 组 件 并 依次 传递 给 子 组 
件 。 也 许 还 记得 这 个 props 数据 是 传递 给 React .createElement 的 参数 。 和 之 前 一 样 ， 你 
可 以 在 创建 组 件 时 用 它 指定 组 件 的 属性 。 在 组 件 内 部 不 能 修改 Props ， 但 我 们 很 快 会 发 现 更 新 
React 组 件 内 数据 的 方法 。 

在 下 一 节 的 代码 清单 2-5 中 我 们 会 看 到 实际 的 React 大 组 人 以 及 要 如 何 创建 更 多 骨 套 的 
React 元 素 并 使 用 this .props 传递 自 定义 数据 。 当 看 到 与 React 类 一 起 使 用 的 属性 时 ， 这 感觉 
就 像 在 创建 类 似 Jedi 的 自 定义 HTML 元 素 并 为 其 提供 “name” 这 样 的 目 定 义 属 性 : <Jedi 
name="obi Wan"/>。 我 会 在 后 续 章 节 中 更 次 和 人 地 探讨 this 这 个 JavaScript 关键 字 , 但 注意 在 
这 个 例子 中 ，this 这 个 被 保留 的 JavaScript 关键 字 指 向 的 是 该 组 件 的 实例 。 





2.2 用 React 创建 组 件 33 
2.2.6 通过 PropTypes 校 验 属性 


React 类 组 件 可 以 自由 使 用 目 定 义 属 性 ， 这 听 上 去 真是 棒 极 了 。 这 就 像 能 够 创建 目 定 义 HTML 
元 素 ， 但 却 有 更 多 功能 。 记 住 ， 能 力 越 大 责任 越 大 。 我 们 需要 某 种 方法 来 验证 所 使 用 的 属性 以 便 
能 够 防止 缺陷 并 规划 组 件 使 用 的 数据 种 类 。 要 做 到 这 些 ， 可 以 使 用 来 自 React 命名 空间 
PropTypes 的 验证 器 。 这 组 PropTypes 验证 右 过 去 包含 在 React 核心 库 中 , 但 之 后 在 React 15.5 
版 中 被 分 离 出 去 并 被 废弃 了 。 要 使 用 PropTypes, 需要 安 交 Prop-types 软件 包 , 这 个 软件 包 
仍 是 React 工具 链 的 一 部 分 但 不 再 包含 在 核心 库 中 , 它 将 被 包含 在 应 用 源 代码 中 以 及 本 章 一 直 使 
用 的 CodeSandbox 示例 中 。 

prop-types 库 提供 了 一 组 校 验 器 ， 它 们 可 以 指定 组 件 需 要 或 期 望 什 么 样 的 属性 。 例 如 ， 如 
果 要 构建 一 个 ProfilePicture 组 件 , 但 没有 图 片 (或 者 用 于 处 理 没 有 图 片 时 的 逻辑 ) 它 就 没有 什么 用 
处 。 可 以 用 PropTypes 来 指定 ProfilePicture 组 件 需 要 用 哪些 属性 以 及 这 些 属性 是 什么 样 的 。 

可 以 把 PropTypes 看 作 提供 了 一 种 可 以 被 其 他 开发 者 和 未 来 的 使 用 者 实现 或 打破 的 契约 。 并 非 
必须 使 用 PropTypes 才能 让 React 工 作 , 但 应 该 用 它 来 防止 故障 并 使 调试 变 得 简单 ,使 用 PropTypes 
的 男 一 个 好 处 是 ， 如 果 先 指定 期 望 什么 属性 ， 就 有 机 会 通盘 思考 组 件 需 要 什么 才能 运作 。 

使 用 PropTypes 时 ,需要 通过 类 的 静态 属性 或 通过 类 定义 后 的 简单 属性 赋值 来 把 propTypes 
属性 添加 到 React .Component 类 。 注意 , 这 个 是 定义 在 类 上 的 小 写 属性 而 不 是 来 自 React 对 
象 的 属性 ， 很 容易 将 它们 混淆 。 代 码 清单 2-4 展示 了 如 何 使 用 PropTypes， 以 及 如 何 从 React 
类 组 件 返 回 React 元 素 。 这 个 代码 清单 把 几 件 事 集合 在 一 起 : 创建 一 个 可 以 传 给 createElement 
的 React 类 ， 添 加 rendez 方 法， 指定 propTypes。 





代码 清单 2-4 使 用 PropTypes 和 render 方法 


import React, { Component } from “ITeact 
import { render } from “react-dom"; 引入 React, React DOM 
import PropTypes from "prop-types"; 和 prop-types 
const node = document .getElementByld('root'); 
class Post extends Component { E 
sr | 创建 React 类 作为 Post 组 件 。 这 个 例子 中 ， 
ys 4 
return React.createElement ( 只 是 指定 了 propTypes 和 render 方法 
Py 
{ 
] N ~ S 
Ee 创建 一 个 class 为 'post 的 


有 
React.createElement ( 
hn2». 
{ 


div 元 素 


className: “PostAuthor " ， 
Td: tl. GBS 了 


| JavaScript 中 ，this 的 指向 有 时 会 令 人 
this.props.user， 困惑 在 这 里 ，this 指 的 是 组 件 的 
React .createElement ( 上 实例 ， 而 不 是 React 类 的 蓝图 


"Span”， 
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{ 


className: 'postBody' 
时 用 className 而 不 是 class 来 
this.props.content 指定 DOM 元 素 的 CSS 类 名 


); 同样 ，content 属性 是 创建 的 


} span 元 素 的 内 部 内 容 


Post.propTypes = { 


user: PropTypes.string.isRequired, 属性 可 能 是 可 选 的 或 必需 的 、 有 类 型 
content: PropTypes.string.isRequired, ei: 了 sole 
id: PropTypes.number.isRequired 其 至 必须 要 有 一 定 的 “形状 ”( 例如 ， 
和 具有 某 些 属性 的 对 象 ) 


const App = React.createElement (Post, { 
a 


econtent: T said: This 1s .a post!', 将 Post 的 React 类 与 一 些 属性 一 起 传递 给 

user: 'mark' React.createElement ， 创 建 一 些 React 

})3 DOM 能 够 演 染 的 东西 一 一 尝试 更 改 数据 
以 查看 组 件 的 呈现 方式 


render (App, node); 


代码 清单 2-4 的 在 线 代 人 码 位 于 https://codesandbox.io/s/3yj462omrq。 

应 该 看 到 一 些 文字 出 现 :“mark said: This is a post!” 如 果 没 有 提供 任何 必要 的 属性 , 会 
在 开发 者 控制 台中 看 到 和 警告。 未 能 提供 某 些 属性 可 能 会 破坏 应 用 ， 因 为 组 件 需 要 这 些 属性 
来 工作 ,但 验证 步骤 不 会 。 换 言 之 ， 如 果 忘 记 给 应 用 提供 一 些 重要 数据 ， 应 用 可 能 会 出 问 
题 ， 但 使 用 PropTypes 验证 不 会 一 一 它 只 是 让 使 用 者 知道 忘记 子 那 个 属性 。 由 于 
PropTypes 只 在 开发 模式 中 进行 类 型 评估 ， 运 行 在 生产 环境 的 应 用 不 会 耗费 额外 的 精力 做 
PropTypes 的 工作 。 

现在 创建 了 一 个 组 件 并 传人 了 一 些 数 据 ， 可 以 尝试 艇 套 组 件 。 我 之 前 已 经 提 到 这 种 可 能 
性 , 这 正 是 让 React 的 使 用 成 为 一 种 乐趣 并 且 使 React 非常 强大 的 部 分 原因 : 能 够 由 其 他 组 件 
创建 组 件 。 代 码 清 单 2-5 说 明了 这 一 点 并 展示 了 children 属性 的 特殊 用 法 。 我 会 在 后 续 章 
市 使 用 路 由 和 高 阶 组 件 时 对 此 进行 详细 介绍 。 当 使 用 this .props.children 属性 时 , 它 就 
像 让 散 套 数据 通过 的 插座 。 在 这 个 例子 中 ,我 们 会 创建 一 个 Comment 组 件 、 将 其 作为 参数 传 
递 并 实现 骨 套 。 


代码 清单 2-5 ”添加 散 套 组 件 





this.props.user, 
React.createElement( 
"span" > 
{ 


className: "postBody" 
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} ， 
this .props.content 把 this.props.children 添加 到 Post 组 


Ls 件 ， 以 便 它 可 以 演 染 children 


this.props.children 


Ws , 
class Comment extends Component { 
render () { S 创建 Comment 组 件 ， 与 创建 
return React.createElement( Post 组 件 类 似 
diy’, 


{ 


className: 'comment' 
上 
React .createElement ( 
'm2!, 
{ 


className: 'commentAuthor' 


}y 
this. DEOnS .USer, 
React .CreateElLement ( 
由 
{ 


className: 'commentContent' 


}, 
thils.props. .content 


} 
] 声明 propTypes 


Comment .propTypes = { 
id: PropTypes.number.1isRequired, 
content: PropTypes.string.isRequired, 
user: PropTypes.string.isRequired 


大 


const App = React.createElement( 


Bos 
{ 

i 

CONntents Sard TS LS a DTst!"; 

user: 'mark' 
}, 将 Comment 组 件 舱 套 到 Post 
React.createElement (Comment, 1{ 

二 组 件 中 

LL 

SET BOB ; 

content: ' commented: wow! how cool!' 


} ) 
时 


ReactDOM.render (APP，hnoae) : 


代码 清单 2-5 的 在 线 代码 位 于 https://codesandbox.io/s/k2vn448pn3。 
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现在 创建 了 一 个 能 套 组 件 , 应 该 能 够 在 浏览 器 中 看 到 更 多 东西 。 接 下 来 ,我 们 将 看 看 要 如 何 
用 之 前 提 及 的 ( 随 React 类 一 起 的 ) 内 其 状态 来 创建 动态 组 件 。 


练习 2-3 ”对 一 个 组 件 树 进行 逆向 工程 
”继续 之 前 , 通过 对 GitHub 这 样 的 网 站 的 一 个 组 件 树 进行 5 逆向 工程 来 检验 们 对 组 件 的 理解。 打开 开发 
者 工具 ， 挑 选 一 个 驱 套 不 太 深 的 DOM 元 素 ， 从 它 开始 重建 React 类 。 考 虑 下 面 的 DOM 元 素 ; 


Your repositories1 -1 





iv 15552 bo0oxed-group fliush repos user~repos js~—repo-filter id your repos roLe= navigation 
jw <div class="boxed-group-action >.c/div> 
bd <h3» 
"Your repositories " 
<Span classx"counter >180c<c7Span> 
“/h3» 
p<div class-"boxed-group~-inner'.“/div> 





如 何 用 React 构造 一 个 类 位 的 组 伯 结 7 ( 无 须 添加 每 个 CSS 类 名 。 ) 


2.3 组件 的 一 生 


本 节 将 增强 Post 和 Comment 组 件 ， 以 使 它们 具有 交互 性 。 早 先 ， 我 们 发 现 作 为 React 类 创 
建 的 组 件 拥有 某 些 特定 的 方法 来 通过 “支撑 实例 ”保存 和 访问 数据 。 为 了 理解 这 是 怎么 回 事 ,让 
我 们 回顾 一 下 React 的 工作 方式 的 整体 情况 。 图 2-11 概括 了 目前 所 学 到 的 东西 。 通 过 由 React 元 
素 ( 映射 到 DOM 的 元 素 ) 组 成 的 React 类 能 够 创建 组 件 。 我 称 为 React 类 的 东西 是 React. 
createElement 能 够 使 用 的 React .Component 的 子 类 。 


React Element { ReactClass { 
type: React Element | String, propTypes: object 
props: ...props render: func, 浏览 器 
} os 
} 
| em 浏览 器 “原生 ”引擎 


二 解释 器 。 
虚拟 DOM ， 实际 DOM 











React 库 





用 组 件 创建 
虚拟 DOM 


图 2-11 放大 React 的 泻 染 过 程 。React 使 用 React 类 和 React 元 素 创 建 内 存 中 控制 实际 DOM 的 
虚拟 DOM。 它 还 创建 了 一 个 “综合 ”事件 系统 ， 以 便 仍 可 以 对 来 自 浏览 器 的 
事件 做 出 反应 ( 如 点 击 、 滚 动 和 其 他 用 户 引 起 的 事件 ) 


a wp wii i 0 a gp i i i nd i i i a he i te 
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由 React 类 创建 的 组 件 拥 有 存储 数据 的 支撑 实例 ， 并 且 需 要 有 一 个 只 返回 单个 React 元 素 的 
render 方法 。React 将 获取 React 元 素 并 由 这 些 React 元 素 创 建 内 存 中 的 虚拟 DOM， 而 它 会 负 
责 管理 和 更 新 DOM。 

我 们 已 经 为 React 类 添加 了 render 方法 和 一 些 PropTypes 校 验 。 但 要 创建 动态 组 件 ， 需 
要 的 远 不 止 这 些 。React 类 可 以 拥有 某 些 特殊 方法 ， 当 React 管理 虚拟 DOM 时 , 它们 会 以 一 定 的 
顺序 被 调用 。 用 来 返回 React 元 素 的 render 方法 只 是 其 中 一 个 方法 。 

除了 保留 的 生命 周期 方法 ， 使 用 者 可 以 添加 自己 的 方法 。React 让 使 用 者 可 以 自由 和 灵活 地 
将 需要 的 任何 方法 添加 到 组 件 中 。 几 乎 任何 有 效 的 JavaScript 都 能 用 于 React。 如 果 翻 回去 看 第 1 
草 中 的 图 1-1， 会 注意 到 占 React 组 件 大 部 分 的 是 生命 周期 方法 、 特 定 属性 和 自 定义 代码 。 还 有 
什么 ? 


2.3.1 React 的 状态 


与 自 定义 方法 和 生命 周期 方法 一 起 , React 类 还 提供 了 能 够 与 组 件 一 起 持久 化 的 状态 ( 数据 )。 
这 来 自我 提 到 的 支撑 实例 。 状态 是 个 很 大 的 话题 一 一 我 无 法 在 本 章 全 面 介绍 它 , 但 现在 只 需 足 人 够 
了 解 它 以 便 能 让 组 件 可 以 交互 并 鲜 活 起 来 。 状态 是 什么 ”从 男 一 个 方面 来 看 , 状态 是 某 个 特定 时 
间 事 物 的 信息 。 例 如 ， 通 过 询问 “你 今天 怎么 样 ? ”来 了 解 朋 友 的 “状态 ”。 

有 两 种 基本 类 型 的 状态 : 可 变 和 不 可 变 ,。 思考 两 者 之 间 区 别 的 一 个 简单 方法 是 从 时 间 的 角度 
来 考虑 。 事 物 在 创建 后 是 否 能 够 变化 ”如 果 可 以 , 它 就 被 称 为 可 变 的 ; 如 果 不 行 ， 它 就 被 称 为 不 
可 变 的 。 关 于 这 些 主题 有 深入 的 学 术 研 究 领域 ， 因 此 我 不 打算 在 这 里 深入 地 讲解 它们 。 

React 中 ， 那 些 通过 扩展 React .Component 并 作为 JavaScript 类 创建 的 组 件 可 能 既 有 可 变 
状态 也 有 不 可 变 状态 , 而 基于 函数 创建 的 组 件 ( 无 状态 函数 组 件 ) 则 只 能 访问 不 可 变 状态 ( 属性 )。 
我 会 在 后 续 草 节 中 涉及 这 些 主题 。 现 在 ， 我 会 专注 于 那些 继承 自 React .Component 的 组 件 以 
及 状态 的 获取 方法 和 其 他 方法 。 在 这 些 种 类 的 组 件 中 ， 可 以 通过 类 实例 的 this.state 属性 访 
问 可 变 状 态 。 而 不 可 变 状态 则 是 通过 this .props 进行 访问 的 , 我 们 已 经 用 它 创 建 过 静态 组 件 。 

不 应 该 在 组 件 内 修改 this.Props。 我 们 会 在 后 续 章 节 了 解 如 何 为 组 件 提供 随时 间 变 化 的 
数据 ， 现 在 只 需 知 道 不 能 直接 改变 this .Props。 

你 可 能 在 想 如 何 使 用 React 的 状态 ( state ) 和 属性 (props )。 答 案 主要 是 如 何 使 用 传人 
的 数据 或 者 水 数 内 被 用 到 的 数据 。 这 包括 计算 、 展 示 、 解析、 业务 迎 辑 以 及 其 他 数据 相关 的 任务 。 
实际 上 ， 属 性 和 状态 是 在 UI 中 使 用 动态 和 静态 数据 的 主要 方式 (展示 用 户 信息 、 传 递 数 据 给 事 
件 处 理 絮 等 )。 

状态 和 属性 是 数据 的 运输 工具 ， 这 些 数据 构成 应 用 并 使 其 有 用 。 如 果 正 在 创建 一 个 社交 网 络 应 
用 (将 在 后 续 章 节 这 么 做 )， 常 常会 组 合 使 用 属性 和 状态 构建 展示 和 更 新 用 户 信息 、 更 新 的 内 容 以 及 
更 多 的 东西 的 组 件 。 如 果 正 在 用 React 做 数据 可 视 化 ， 你 可 能 会 将 属性 和 状态 作为 D3.jjs 这 样 的 可 视 
化 库 的 输入 。 无 论 你 在 构建 什么 ,很 可 能 会 在 React 应 用 中 使 用 状态 和 属性 来 管理 和 传输 信息 。 
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系 习 2-4 可 变 与 不 可 变 
“继续 之 前 ， 通 过 思 et pt lb 

面 每 个 语句 标记 为 真 或 假 。 
”可 变 意 味 着 数据 能 够 随时 间 改 变 。TIF 
用 React 中 的 this .state 属性 访问 state。 TIF 

Props 是 React 提供 的 可 变 对 象 。TIF 
不 可 变数 据 不 会 随时 间 改 变 。TIF 

通过 this .props 访问 属性 。TIF 


da 设 定 初始 状态 


应 该 在 什么 时 候 使 用 状态 ” 要 如 何 开始 使 用 状态 ? 目前 ， 简 单 的 答案 是 ， 在 想 要 改变 存储 
在 组 件 中 的 数据 时 使 用 。 我 说 过 属性 是 不 可 变 的 (不 可 修改 的 ), 所 以 , 如 果 需 要 改变 数据 的 话 ， 
束 秆 要 可 变 状态 。 在 React 中 ,需要 变化 的 数据 常常 来 自 于 用 户 输入 (通常 是 文本 、 文 件 、 切 
换 选 项 等 ) 或 者 是 用 户 输入 的 结果 ,但 也 可 能 是 许多 其 他 东西 。 为 了 跟踪 用 户 与 表单 元 条 的 交 
互 , 需要 提供 初始 状态 ， 而 后 随时 间 改 变 该 状态 。 可 以 使 用 组 件 的 构造 也 数 来 为 组 件 设 置 初始 
状态 一 一 一 个 构筑 于 之 前 代码 胡 单 的 想法 和 概念 之 上 的 评 仑 框 组 件 。 它 让 用 户 用 一 个 简单 的 表单 
给 帖子 添加 评论 。 代 码 清单 2-6 展示 了 如 何 搭建 组 件 并 设置 初始 状态 。 


代码 清单 2-6 ”设置 初始 状态 





i 
class CreateComment extends Component 
SeOnStrEuctor (区 六 CS 





Ri 在 类 构造 限 数 中 调用 super 并 将 初始 state 
this.state = { 六 
contents ™Y. 意 的 是 ， 除 在 组 件 类 的 构造 孙 数 中 之 外 ， 
UsSer: 1， 一 般 不 会 像 这 样 对 state 赋值 
}; 
} 
render() { 
return React.createElement( 
' form , 
{ 
className: 'createComment' 
}, 
React .createElement ('input"', 将 组 件 创建 为 React 类 ， 其 为 用 
Re 户 提供 了 一 些 输 入 字段 一 我 
aceholder: "Yout name', 了 Ss N Es 
ep this.state.user 会 在 后 续 草 他 中 更 详细 地 讨论 
7 表单 
React .createElement('input', 1 


type: ‘text", 
placeholder: 'Thoughts?' 
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}) ， 


React .createElement ('input', { 
tyvpes:—eubmit”, 
value: 'Post' 


} ) 
} \ 
} 
CreateComment .propTypes = { 


content: React.PropTypes.string 


3 


Sp 
const App = React.createElement\( 
Post, 
{ 
6 Ue 
GOnNntents Sad TnIiS 9 a POSst 


iiSerEs ‘mark" 
Fa 


React.createElement (Comment, 1 


二 区 7 

user: "jpeb '"， 

content: ' commented: wow! how Cool1! 将 i 添加 到 
} ) ， SX 
React.createElement (CreateComment) App 组 件 中 


3 


代码 清单 2-6 的 在 线 代 码 位 于 https://codesandbox.io/s/p5r3kwqx5q。 

需要 使 用 一 个 专门 的 方法 来 更 新 组 件 类 的 构造 晒 数 中 初始 化 的 状态 。 不 能 像 在 非 React 情况 下 那 
样 直 接 履 盖 this .state, 因为 React 需 要 追踪 状态 并 确保 虚拟 DOM 和 实际 DOM 保持 同步 。 需 要 
使 用 this .setState 来 更 新 React 类 组 件 中 的 状态 。 来 看 一 下 它 的 基本 用 法 。this .setState 
接收 一 个 用 来 更 新 状态 的 更 新 髓 因数 ， 而 且 this .setState 不 返回 任何 东西 : 


SetState ( 
function (prevState, props) -> nextState, 
callback 

) -> void 


this.setState 接收 一 个 返回 对 象 的 更 新 器 孔 数 ,该 对 象 会 与 状态 进行 浅 合并 。 例如, 一 
开始 将 属性 username 设置 为 空 字符 串 ， 可 以 使 用 this.setState 为 组 件 状 态 设置 新 的 
username 值 。React 会 接收 这 个 值 并 用 新 值 更 新 支撑 实例 和 DOM。 

JavaScript 中 的 更 新 或 重新 赋值 与 使 用 setState 之 间 的 一 个 关键 区 别 是 ，React 能 够 根据 
状态 变化 选择 批量 更 新 以 便 使 效率 最 大 化 。 这 意味 着 ， 当 调用 setState 进行 状态 更 新 时 ， 它 
无 须 立 即 执行 。 可 以 更 多 地 将 其 当 作 一 个 确认 一 一 React 将 以 最 高 效 的 方法 基于 新 状态 更 新 
DOM， 尽 可 能 快 。 

什么 会 引起 React 进行 更 新 ” JavaScript 是 事件 驱动 的 ， 所 以 它 可 能 会 响应 某 种 用 户 输入 ( 至 少 
在 浏览 器 中 ), 可 能 是 一 次 点 击 、 按键 或 者 许多 浏览 絮 支 持 的 其 他 事件 。 事件 与 React 如 何 协同 工作 ? 
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React 实现 了 一 个 合成 事件 系统 作为 虚拟 DOM 的 一 部 分 ， 它 会 将 浏览 硕 中 的 事件 转换 为 React 应 用 
的 事件 。 可 以 设置 响应 浏览 器 事件 的 事件 处 理 器 , 就 像 通常 用 JavaScript 做 的 那样 。 一 个 区 别 是 React 
的 事件 处 理 器 是 设置 在 React 元 素 或 组 件 目 身 之 上 的 〈 而 不 是 用 addEventListener )。 可 以 用 来 目 这 些 
事件 (输入 框 的 文本 、 单 选 按 钮 的 值 或 事件 的 目标 ) 的 数据 更 新 组 件 的 状态 。 

代码 清单 2-7 展示 了 如 何 将 已 经 学 到 的 有 关 设 置 初始 state 和 设置 事件 处 理 需 的 知识 付 诸 实 
践 。React 能 够 监听 浏览 右 中 很 多 不 同事 件 ， 涵 盖 了 几乎 每 种 可 能 的 用 户 交 互 〈 上 点击、 按键 、 表 
单 、 滚 动 等 )。 这 里 我 们 最 关心 的 是 两 个 主要 事件 : 当 表 单 输入 值 改 变 的 时 候 ， 以 及 当 表 单 被 提 
交 的 时 候 。 通 过 监听 这 些 事件 ， 能 够 接收 并 使 用 数据 来 创建 新 评论 。 


代码 清单 2-7 ”设置 事件 处 理 恬 





class CreateComment extends Component { 
CONStrIUCtoOr (BLOBDSY 4 
super(props)'; 


this.state = f 由 于 使 用 类 
conbtent * 创建 的 组 件 
站 海 刀 攻 无 法 目 动 绑 
}; 定 组 件 的 方 
this.handleUserChange = this.handleUserCchange .bina(this) ; 法 , 因此 需要 
this.handleTextChange = this.handleTextChange.bind (this); 在 构造 函数 
this.handleSubmit = this.handleSubmit.bind (this),; i 
} 中 将 它们 绑 
handleUserChange (event) { 定 到 this 上 
const val = event.target.value; 旨 定 事件 处 理 器 来 处 理 作 
this,setState(() => (i 者 字段 的 更 改 一 一 用 
user: val event.target.value 获取 输入 
a 元 素 的 值 并 用 this.setState 
乡 各 状 太 
handleTextChange (event) { 更 新 组 件 的 状态 
const val = event.target.value; 
this.setState(() => ({ 
ot wal 用 类 似 函数 为 评论 内 
容 创建 事件 处 理 器 
handleSubmit (event) { 
event .preventDefault ();} | 表单 提交 事件 的 事件 处 理 需 


this.setState(() => ({ 
SG 
ECONtESnt *" Aa 
La 够 提交 进一步 的 评论 
} 
render() { 
return React.createElement( 
‘EOQPnm" , 
{ 
className: 'createComment', 
onSubmit: this.handleSubmit 
}, 


React .createElement ('input', { 
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type: 'text', 
placeholder: 'Your name', 
Value: this.state.user, 
onChange: this.handleUserChange 
React.createElement('input', 1 
type: 'text', 
placeholder: 'Thoughts?", 
value: this.state.content, 
onChange: this.handleTextChange 
} )， 
React .createElement ('input', { 
type: 'submit', 
value: "POSt" 


}) 


} 
} 
CreateComment .propTypes = { 
onCommentSubmit: PropTypes.func.isRequiredgd, 
content: PropTypes.string 


大 


代码 清单 2-7 的 在 线 代 码 位 于 https://codesandbox.io/s/x9mxo31pxp。 

有 注意 到 是 如 何在 组 件 类 的 构造 吨 数 中 使 用 .bind 的 吗 ? 在 之 前 版 本 的 React 中 ，React 
会 目 动 将 方法 绑 定 到 组 件 实例 上 。 但 切换 到 JavaScript 类 之 后 ， 需 要 自己 绑 定 方法 。 如 果 和 十 
义 了 一 个 组 件 方 法 而 它 却 不 工作 , 你 需要 确定 已 经 正确 地 绑 定 了 方法 一 一 最 初 开 始 使 用 React 
时 ,很 容易 忘记 。 

接 下 来 ， 尝 试 去 反 onChange 事件 处 理 器 ， 看 看 是 否 能 够 在 表单 输入 框 中 输入 任何 东西 。 
答案 是 不 能 ， 因 为 React 要 确保 DOM 与 虚拟 DOM 保持 一 致 ， 如 果 虚 拟 DOM 没有 更 新 ， 就 不 
会 让 DOM 发 生变 化 。 如 果 现 在 不 完全 明白 ,不 用 担心 ， 第 5 章 和 第 6 章 将 更 全 面 地 讨论 表单 。 

既然 有 办 法 监听 事件 并 修改 组 件 状 态 ， 就 有 办 法 用 单 向 数据 流 创建 新 组 件 。 在 React 
中 ， 数 据 目 顶 加 下 流动 ， 作 为 从 父 组 件 到 子 组件 的 输入 。 当 创建 复合 组 件 时 ， 可 以 通过 属 
性 向 子 组 件 传 递 信 息 并 在 子 组 件 中 使 用 这 些 信息 。 这 表示 可 以 将 来 自 CreateComment 组 
件 的 数据 存储 在 父 组 件 中 并 从 那里 将 数据 传递 给 子 组 件 。 但 要 如 何 将 从 一 个 子 组 件 的 新 评 
论 中 获取 的 数据 ( 用 户 输 入 到 表单 的 文本 ) 送 回 父 组 件 和 子 组 件 ? 图 2-12 展示 了 此 类 数据 
流 的 例子 。 

要 如 何 实 现 ? 我 们 还 没有 考虑 通过 属性 传递 的 一 种 数据 ， 那 就 是 困 数 。 因 为 JavaScript 中 
图 数 可 以 作为 参数 传递 给 其 他 果 数 ， 所 以 可 以 利用 这 一 点 。 可 以 在 父 组 件 中 定义 一 个 方法 并 将 
其 作为 属性 传递 给 子 组 件 。 如 此 一 来 , 子 组 件 就 能 够 将 数据 发 送 回 父 组 件 而 无 有 顷 了 解 父 组 件 如 
何 处 理 数据 。 如 果 需 要 随 数 据 的 变化 而 进行 调整 ， 无 须 对 CreateComment 组 件 做 任何 事情 。 
要 执行 作为 属性 传递 的 图 数 ， 子 组 件 只 需要 调用 方法 并 将 数据 传 给 它 。 代 码 清单 2-8 展示 了 如 
何 将 晒 数 用 作 属 性 。 
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父 组 件 中 的 状态 


comments([Comment,Comment]) 


遍历 状态 ， 提 供 数据 给 评论 组 件 





图 2-12 要 添加 帖子 ， 需 要 从 输入 字段 获取 数据 并 以 某 种 方式 传 给 父 组 件 ， 
然后 更 新 后 的 数据 将 被 用 来 泻 染 帖子 





代码 清单 2-8 将 函数 用 作 属 性 


ET 
class CreateComment extends Component { 
construetor (proBs) { 
super (props); 
this.state = { 
content: ™", 
SEE 
this.handleUserChange = this.handleUserChange.bind(this); 
this.handleTextChange = this.handleTextChange.bind(this); 
this.handleSubmit = this.handleSubmit.bindl(this); 
} 
handleUserChange (event) 
this.setState(() => ({ 
USer: eVent .target .value 
}) ) 
} 
handleTextChange (event) { 
this.setState(() => (1{ 
content: event.target.value 
有 
} 
handleSubmit (event) { 
event .preventDefault (); 


this.props.onCommentSubmit(t{ 
user: this.state.user.trim(), 调用 由 父 组 件 作为 属性 传人 的 
content: this.state.content.trim!() onCommentSubmit 负数 一 一 传 
} ) ; 和 来自 表 单 的 数据 并 重 置 表 单 
this.setState(() => (1 以 便 用 户 知 道 其 操作 已 成 功 
USeFs  "" 
toe 0" i 
£3 
} 
render() 1 
return React.createElement ( 
De) 


{ 


className: 'createComment', 
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onSubmit: this.handleSubmit 
} ， 
React.createElement ('input', 
tye: "text". 
placeholder: "Your name', 
value: this.state.user, 


onChange: this.handleUserChange 


React . CreateElement ('input"', 
51 
placeholder: "Thoughts2? "， 
Value: this.state.content, 


onChange: this.handleTextChange 


ys 


React .createElement ('input"', i{ 
types “stubmit", 
value: "Post 


} ) 


} 
Rie Wn 
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要 忘记 将 已 设置 的 方法 绑 定 到 
事件 一 一 如 果 没 有 绑 
定 ， 正 确 的 事件 与 方法 之 间 就 不 
会 有 任何 联系 


代码 清单 2-8 的 在 线 代 码 位 于 https://codesandbox.io/s/p3mk26v31x。 


现在 组 件 能 够 将 新 评论 数据 传递 给 父 组 件 ， 需要 包含 


一 些 模拟 数据 以 便 能 够 开始 评论 。 后 续 


章节 中 , 将 使 用 Fetch API 和 一 个 Rest 风格 的 JSON API, 但 现在 使 用 自己 创建 的 假 数 据 就 可 以 。 


代码 清单 2-9 展示 了 如 何 模拟 带 有 评论 的 帖子 的 基本 数据 。 


代码 清单 2-9 模拟 API 数据 


const data = { 





post: { 为 CommentBox 组 件 设 
id; 123, 置 模拟 数据 
content: 


'What we hope ever to do with ease, we must first learn to do 


with diligence. 一 Samuel Johnson', 
user: "Mark Thomas', 


} ， 


comments: [| 
{ 
I 0. 
SEE "David,., 
SONtCeOrts "swmellse Wilms ", 
}， 
{ 
TCR 


user: "Haley'"'， 
contents: LOove Tt."., 


Vl 
user: 'Peter', 


content: ‘Who was Samuel Johnson?', 


Te 
user: "Mitchell1 ' ， 


将 把 这 些 评 论 对 象 
作为 已 有 的 评论 


44 第 2 章 <Hello World/>: 我 们 的 第 一 个 组 件 


content: '‘'@Peter get off Letters and do your homework', 
}, 
{ 将 把 这 些 评论 对 象 

ey 作为 已 有 的 评论 

USer: "Peter', 


Content: ‘Cmitenell ek :PP", 


接 下 来 ,需要 一 种 方法 来 展示 所 有 的 评论 ， 这 对 于 React 很 容易 。 我 们 已 经 有 展示 评论 的 组 件 。 
既然 操作 React 组 件 所 需 的 只 是 普通 的 JavaScript,， 可 以 使 用 .map () 函数 返回 一 个 React 元 素 的 新 数 
组 。 不 能 使 用 内 联 的 .forEach () ， 因 为 它 不 返回 数组 ， 而 这 会 让 React .createElement () 无 
事 可 做 。 然 而 ， 可 以 用 forEach 创建 一 个 数组 ， 而 后 把 这 个 数组 传 进去 。 

除了 对 现 有 评论 进行 循环 迭代 , 还 需要 定义 一 个 可 以 传递 给 CreateComment 组 件 的 方法 。 它 
需要 通过 接收 子 组 件 的 数据 来 修改 其 状态 中 的 评论 列表 。 提 交 方 法 和 状态 需要 加 入 新 的 父 组 件 : 
CommentBox。 代 码 清 单 2-10 展示 了 如 何 创 建 组 件 并 设置 这 些 方法 。 


代码 清单 2-10 ”处 理 评 论 提 交 和 元 素 的 循环 迭代 





class CommentBox extends Component 
constructor (props) 
super (props)，; 从 最 高 层 将 评论 数据 传 
this.state = { 给 CommentBox 
comments: this.props.comments 
}; 
this.handleCommentSubmit = this.handleCommentSubmit.bind(this); 
} 


handleCommentSubmit (comment) 


const comments = this.state.comments,; 

// note that we didn't directly modify state 不 要 直接 修改 
comment.id = Date.now(); 状态 一 一 相反 ， 
const newComments = Comments .concat ( [commen 七 ] ) ， 创建 一 个 副本 
this.setState (1{ i 


Comments: newComments 
上 这 
} 


render() { 
return React.createElement ( 
"dEv! , 


{ 


className: 'commentBox' \ 


}, 


React.createElement (Post, { 


id: this.props.post.id, 如 先前 ， 从 最 高 层 传人 数据 变量 
content: this. Brops.Bost. content, 来 访问 帖子 ( post ) 数据 


User: this.props.post.user 


bys 
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this.state.comments.map (function (comment) { 


return React.createElement (Comment, { 遍历 thie.atate connniedits 中 
key: comment.idqd, 的 评论 并 为 每 个 评论 返回 
id: comment.id, 
content: comment.content, 一 个 React 元 素 


User: comment .user 
}Ys 、 
i 
React.createElement (CreateComment, { 
onCommentSubmit: this.handleCommentSubmit 
} ) 
把 父 组 件 的 handleCommentSubmit 方法 


提供 给 CreateComment 组 件 使 用 


CommentBox.propTypes = { 
PropTypes .object, 
comments: PropTypes.arrayOf (PropTypes .object) 


const App = React.createElement (CreateComment); 


ReactDOM .renaeLr ( 


React .createElement (CommentBox, 将 模拟 数据 作 为 属 性 传 


给 CommentBox 组 件 


comments: data.comments, 
post: data.post 


代码 清单 2-10 的 在 线 代 码 位 于 https://codesandbox.io/s/z6064oljn4。 

至 此 , 我 们 有 了 一 个 不 好 看 、 未 经 测试 但 可 以 工作 的 组 件 ， 它 可 以 对 属性 进行 验证 、 更 新 状 
态 并 能 够 添加 新 评论 。 它 看 起 来 不 怎么 样 ， 所 以 我 将 完善 它 作为 一 个 挑战 留 给 读者 去 完成 ,让 这 
个 评论 框 配 得 上 我 们 Letters 这 个 假想 公司 。 
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我 们 已 经 创建 了 第 一 个 React 动态 组 件 。 如 果 觉 得 这 很 容易 ， 那 太 棒 了 ! 如 果 觉 得 部 分 代码 
连同 全 部 舱 套 的 React.createElement 难以 阅读 ， 那 也 没关系 。 我 们 即将 讨论 一 些 创建 组 件 的 简单 
方法 , 但 首先 需要 关注 基本 原理 。 以 相反 的 方式 (先是 “魔法 ”和 容易 的 东西 ， 其 后 是 基础 和 细 
节 ) 学 习 几 乎 任何 其 他 东西 通常 更 容易 ,但 从 长 远 来 看 ， 这 可 能 会 妨碍 学 习 者 ， 因 为 你 没有 花 大 
力气 理解 底层 机 制 的 工作 方式 。 如 果 回 头 审视 模拟 数据 ， 也 许 会 想起 这 则 名 言 ， 很 是 应 景 : 


如 果 我 们 希望 做 事 得 心 应 手 ， 就 必须 首先 学 会 辛勤 付出 。 


一 塞 比尔 . 约翰 壕 
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2.4.1 使 用 JSX 创建 组 件 


掌握 基础 很 重要 , 但 并 不 意味 着 我 们 必须 自 讨 昔 吃 。 事实 上 , 与 仅 使 用 React .createElement 
相 比 ， 有 更 为 简便 易 行 的 方法 创建 React 组 件 。 认 识 JSX: 更 好 的 方法 。 

JSX 是 什么 ” 它 是 对 ECMAScript 的 一 种 类 XML 的 语法 扩展 ， 但 它 没有 定义 任何 语义 ， 其 
专门 提供 给 预 处 理 器 使 用 。 换 言 之 ，JSX 是 JavaScript 的 扩展 ， 其 类 似 XML 并 且 仅 用 于 代码 转 
换 工 具 。 它 任何 时 候 都 不 是 那 种 会 并 人 ECMAScript 规范 的 东西 。 

JSX 通过 让 使 用 者 书写 XML 风格 ( 想 想 HTML ) 的 代码 来 替代 使 用 React . createClass 
从 而 起 到 帮助 作用 。 换 句 话 说， 它 让 人 编写 类 似 于 (但 不 是 ) HTML 的 代码 。JSX 预 处 理 程序 类 似 
于 Babel (将 JavaScript 代码 转换 成 与 旧 浏 览 咒 兼容 的 代码 的 转 义 器 ) 会 浏览 所 有 JSX 代码 并 将 其 
转换 为 常规 的 JavaScript， 就 像 到 目前 为 止 我 们 所 写 的 那些 代码 。 一 个 可 能 的 影响 是 在 浏览 右 本 地 
运行 未 经 转换 的 JSX 代码 是 行 不 通 的 一 一 当 JavaScript 被 解析 时 会 得 到 各 种 各 样 的 语法 错误 。 

在 JavaScript 中 编写 XML 风格 的 类 HTML 代码 也 许 会 引起 使 用 者 的 警戒 本 能 ,但 有 许多 很 
好 的 理由 去 使 用 JSX， 我 将 来 会 介绍 它们 。 现 在 ， 看 看 代码 清单 2-11 以 了 解 使 用 JSX 后 评论 框 
组 件 会 是 什么 样子 。 我 省 略 了 一 些 代 码 以 使 你 专注 于 JSX 语法 更 容易 。 注 意 到 ，Babel 被 包含 进 
来 作为 CodeSandbox 环境 的 一 部 分 。 通 常 ， 可 以 使 用 像 Webpack 这 样 的 构建 工具 来 转 义 JavaScript， 
但 也 可 以 导入 Babel 并 让 其 在 没有 构建 步骤 的 情况 下 工作 。 但 那 会 非常 慢 ， 绝 不 应 该 在 生产 环境 
中 这 样 做 。 


代码 清单 2-11 使 用 JSX 重 写 组 件 





class CreateComment extends Component 
CONStructor (BropPS) 1 
super (props); 
this.state = { 
Eonbtents 
USers 
}; 
this.handleUserChange = this.handleUserChange.bind (this); 
this.handleTextChange = this.handleTextChange.bind(this); 
this.handleSubmit = this.handleSubmit.bindl(this); 
} 


a 
render() |{ 
return ( 
<form onSubmit={this.handleSubmit} className="createComment"> 
<input 
value={this.state.userl} 
NS Sa 不 在 对 象 上 创建 props， 而 
ge 四 是 在 JSX 中 像 在 HTML 那 
Pa 样 创建 它们 一 一 要 传人 表 
<input 达 式 需要 使 用 {} 语 法 。 


value={this.state.content) 


2.4 认识 JSX 47 


onChange={this.handleTextChange} 
placeholder="Thoughts?" 


type="text" 
/ 
<button type="submit">Post</button> 
</form> 


} . 


class CommentBox extends Component { 


i 这 是 之 前 创建 的 Post 
render() { 的 React 类 一 一 注意 

rt UT ( 现在 它 更 清晰 地 表明 

<div className="commentBox"> 它 是 自 定义 组 件 而 且 


看 起 来 它 就 像 正 身 处 
1d=1this proBDs.BoOSst.1d} 
content={this.props.post.content)} HTML 中 寺 样 
user={this.props.post.user} 

/> 
{this.state.comments.map (function(comment) { 在 他 内 部 使 用 党 
~ er 规 JavaScript 遍历 
和 本 评论 列表 并 为 每 
ey={comment .i Vp 
content={comment . content 七 } 个 评论 创建 一 个 
user={comment .useLr} 评论 组 件 
/3 
)'3 
} 
<CreateComment 
onCommentSubmit={this.handleCommentSubmit} 
7 
</div> 将 handleCommentSubmit 


4 作为 属性 传人 


CommentBox.propTypes = { 

Bosts PropTypes. object, 

comments: PropTypes.arrayOf (PropTypes .object) 
je 


ReactDOM. render!l 
<CommentBox 


comments={data.comments]} 
post={data.post} 在 最 上 层 ，CommentBox 也 是 一 个 


A 需要 提供 属性 并 传 给 React DOM 
node 去 演 染 的 自 定义 组 件 


代码 清单 2-11 的 在 线 代 码 位 于 https://codesandbox.io/s/vnwz6y28x5。 
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2.4.2 JSX 的 好 处 以 及 JSX 与 HTML 的 差别 


现在 我 们 已 经 看 到 了 实际 应 用 的 JSX， 也许 你 对 它 已 经 不 再 那么 怀疑 了 。 但是， 如 果 仍 旧 持 
保留 态度 ， 重 要 的 是 考虑 JSX 为 使 用 React 组 件 带 来 的 诸多 好 处 。 下 面 是 其 中 两 个 好 处 。 
图 类 似 于 HTML 且 语 法 简单 一 一 如 果 重 复 编写 React .createElement 让 人 感到 乏味 ， 
或 者 发 现 通 套 让 人 无 所 适 从 ， 那 你 并 不 孤单 。JSX 与 HTML 的 相似 性 使 得 用 熟悉 的 方式 
声明 组 件 结构 更 为 简单 而 且 极 大 地 提高 了 可 谈 性 。 
加 声明 式 和 封装 一 一 通过 将 组 成 视图 的 代码 与 相关 联 的 方法 包含 在 一 起 ， 使 用 者 创建 了 一 
个 功能 组 。 本 质 上 ， 你 需要 知道 的 有 关 组 件 的 所 有 信息 都 汇聚 在 一 处 ， 无 关 紧 要 的 东西 
被 隐藏 起 来 ， 这 意味 着 使 用 者 能 够 更 容易 地 思考 组 件 并 且 更 加 清楚 它们 作为 一 个 系统 是 
如 何 工作 的 。 
这 可 能 感觉 像 回 到 了 20 世纪 90 年 代 末 那 种 混合 着 JavaScript 编写 标记 语言 的 情况 ， 但 这 并 
不 意味 着 它 是 个 坏 主 意 。 
需要 注意 的 是 ，JSX 不 是 HTML (或 者 XML ) 一 一 它 只 会 转 义 成 常规 React 代码 ， 就 像 到 
目前 所 写 的 ， 而且 它 的 语法 和 惯例 也 不 完全 相同 。 需要 关注 一 些 细微 的 差异 , 后 续 章节 将 更 全 面 
地 讨论 这 些 差异 ， 但 我 先 简要 地 介绍 其 中 的 一 些 。 
国 HTML 标签 与 React 组 件 使 用 React .createClass 创建 的 自 定 义 React 组 件 按 惯 
例 首 字 母 是 大 写 的 ， 所 以 我 们 能 够 分 辩 自 定义 组 件 和 原生 HITML 组 件 。 
国 属性 表达 式 当 想 使 用 JavaScript 表达 式 作 为 属性 值 时 ,如 代码 清单 2-8 所 示 , 将 表达 
式 包 在 一 对 大 括号 中 (<Cemment a={this .props.b}/> ) 而 不 是 双 引 号 中 (<User 
OBS/ 四 
国 布尔 属性 一 一 省 略 一 个 属性 的 值 (<Planactive/>, <Input checked/> ) 会 让 JSX 
将 其 视 为 true。 要 传人 false 值 ， 必 须 使 用 属性 表达 式 (attribute={false} )。 
国 搓 套 表达 式 一 一 要 在 元 素 内 部 插入 表达 式 的 值 ,也 需要 使 用 大 括号 ( <p>{this .props. 
content}</p> ) 
JSX 中 有 些 细微 差别 ， 甚 至 偶尔 有 些 “ 烦 费 思量 之 处 "” ， 后 续 音 节 会 探讨 所 有 这 些 内 容 。 我 
们 会 在 组 件 中 大 量 使 用 JSX， 现 在 我 们 已 经 开始 使 用 JSX， 因 此 我 们 将 能 够 更 容易 地 创建 、 阅 读 
和 思考 组 件 。 











2.5 小结 


我 们 在 本 草花 了 大 量 时 间 探 讨 组 件 ， 让 我 们 回顾 一 些 关 键 点 。 
国 ”我们 使 用 了 两 种 主要 类 型 的 元 素来 创建 React 的 组 件 : React 元 素 和 React 类 。React 元 
素 是 “你 想 在 屏幕 上 看 到 的 东西 ”并 且 它 们 与 DOM 元 素 相似 。 男 一 方面 ，React 类 是 


Wy 
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继承 目 React .Component 的 JavaScript 类 。 这 就 是 我 们 通常 所 说 的 组 件 ， 它 们 要 人 么 
从 类 创建 (通常 扩展 React .Component ) 要 么 从 函数 创建 (无 状态 函数 组 件 ， 后 续 
章节 会 探讨 )。 

加 React 类 可 以 访问 随时 间 变化 的 状态 ( 可 变 状 态 )， 而 所 有 React 元 素 只 能 访问 不 能 被 修 
改 的 属性 (不 可 变 状 态 )。 

图 React 类 还 有 被 称 为 生命 周期 方法 的 特殊 方法 ，React 会 在 泻 染 和 更 新 过 程 中 按 一 定 顺序 
调用 它们 。 这 使 得 组 件 更 容易 预测 而 且 让 人 很 容易 挂 载 进 组 件 的 更 新 过 程 。 

图 ”React 类 可 以 在 其 上 定义 方法 来 执行 诸如 改变 状态 这 样 的 任务 。 

加 React 组 件 通 过 属性 进行 通信 并 具有 父子 关系 。 父 组 件 能 够 传递 数据 给 子 组 件 ， 但 子 组 
件 不 能 修改 父 组 件 。 它 们 可 以 通过 回调 图 数 将 数据 传递 给 父 组 件 ， 但 不 能 直接 访问 父 
组 件 。 

国 JSX 是 JavaScript 的 一 种 类 XML 扩展 ， 它 能 让 人 用 更 容易 和 更 熟悉 的 方式 编写 组 件 。 在 
JavaScript 代码 中 编写 类 似 HTML 的 东西 最 初 也 许 感 觉 很 奇怪 , 但 JSX 让 人 们 用 更 为 熟悉 
的 方式 在 React 中 编写 标记 语言 而 且 通 常 比 React .createElement 调用 更 易于 阅读 。 

我 们 创建 了 第 一 个 组 件 , 但 只 是 对 用 React 能 做 什么 了 解 了 一 些 皮 毛 。 接 下 来 的 一 章 ， 随 着 

视野 的 扩展 , 我 们 将 开始 探索 如 何 处 理 更 复杂 的 数据 ,了 人 解 不 同类 型 的 组 件 , 以 及 深入 研究 状态 。 
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怪人 所 一 部 分 我 们 从 核心 思想 和 关键 点 审视 了 React， 快 速 了 解 了 它 的 一 些 API 并 构 
建 了 几 个 组 件 。 期 望 这 能 够 让 你 更 全 面 地 了 解 ， 作 为 一 种 技术 React 是 什么 以 

及 React 是 如 何 工作 的 。 但 走马 观 花 地 学 习 并 不 能 让 你 充分 利用 React 的 优势 ， 从 而 用 它 
构建 出 健壮 、 动 态 的 用 户 界 面 。 

这 正 是 第 二 部 分 的 立意 所 在 。 在 第 二 部 分 我 们 将 开始 更 彻底 地 探索 React 并 仔细 了 解 
其 API。 我 们 会 看 看 如 何 创 建 组 件 以 及 可 以 创建 的 一 些 不 同类 型 的 组 件 。 我 们 会 在 第 3 章 
探索 数据 如 何在 React 应 用 中 流动 ， 这 将 有 助 于 你 理解 React 处 理 组 件 中 的 数据 的 方式 。 

在 第 4 草 中 你 会 了 解 React 中 的 生命 周期 方法 并 开始 构建 本 书 其 余部 分 关注 的 项 
目 : 一 个 称 为 Letters Social 的 社交 网 络 应 用 。 如 果 想 提前 一 舌 最 终 的 项 目 ， 可 以 访问 
https://social.react.sh。 第 4 草 会 帮助 你 理解 React 组 件 API 并 展示 如 何 搭建 Letters Social 
项 目 。 

在 第 5 章 和 第 6 草 中 你 会 了 解 React 的 表单 。 表单 是 大 多 数 Web 应 用 的 重要 部 分 , 我 
们 会 探索 它们 在 React 中 的 工作 方式 。 我 们 会 为 Letters Social 添加 表单 并 创建 让 用 户 发 帖 
的 用 户 界 面 以 及 集成 Mapbox 从 而 为 帖子 添加 地 图 位 置 。 

在 第 7 草 和 第 8 章 中 ， 我 们 会 深入 路 由 。 路 由 是 现代 前 端 Web 应 用 的 男 一 个 核心 部 
分 。 我 们 会 用 React 从 头 构建 路 由 并 为 Letters Social 添加 多 个 页 面 。 在 这 一 章 的 末尾 ， 我 
们 会 集成 Firebase 以 便 用 户 能 够 登 人 应 用 。 

当 我 们 在 第 9 草 完 结 第 二 部 分 时 , 我 们 将 重点 关注 测试 。 测 试 是 所 有 软件 的 重要 组 成 
部 分 ，React 也 不 例外 。 在 诸多 工具 中 ， 我 们 会 用 Jest 和 Enzyme 来 探索 测试 React 组 件 。 
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本 章 主要 内 容 

国 ”可 变 状 态 与 不 可 变 状 态 
有 状态 组 件 和 无 状态 组 件 
组 件 通 信 一 . 
单 向 数据 流 


第 2 章 大 致 介绍 了 React。 我 们 花 了 些 时 间 学 习 了 React, 了 解 它 的 设计 和 API 背后 的 一 些 概 
念 ， 我 们 甚至 还 逐步 说 明了 如 何 用 React 组 件 构建 一 个 简单 注释 框 。 在 第 4 章 中 ,我 们 将 开始 更 
全 面 地 使 用 组 件 并 开始 构建 Letters Social 示例 项 目 。 但 在 此 之 前 , 我 们 需要 更 多 地 了 解 如 何 处 理 
React 中 的 数据 ， 并 理解 数据 是 如 何在 React 应 用 中 流动 的 。 这 就 是 本 章 的 内 容 。 


3.1 状态 介绍 


第 2 章 简要 介绍 了 如 何 处 理 React 组 件 中 的 数据 ， 但 如 果 我 们 想 构 建 大 型 的 React 应 用 ,我 
们 需要 花费 更 多 时 间 来 关注 它 。 在 本 市 中 ， 我 们 将 学 习 : 

国 状态 ; 

国 React 如 何 处 理 状 态 ; 

图 ”数据 如 何 通 过 组 件 流动 。 

现代 Web 应 用 程序 通常 构建 为 数据 优先 的 应 用 。 诚 然 ， 仍 有 许多 静态 网 站 (我 的 博客 就 是 
其 中 之 一 ), 但 即便 是 这 些 网 站 也 是 随 着 时 间 的 推移 而 不 断 更 新 的 ， 而 且 静 态 网 站 通常 被 认为 十 
与 现代 Web 应 用 不 同类 别 的 网 站 。 人 们 经 常 使 用 的 大 多 数 Web 应 用 是 高 度 动态 的 并 且 充 满 了 随 
时 间 变 化 的 数据 。 

想 想 Facebook 这 样 的 应 用 。 作 为 社交 网 络 ， 数 据 是 所 有 有 用 东西 的 生命 线 ， 它 提供 了 与 互 
联网 上 的 其 他 人 进行 交互 的 多 种 方式 ， 所 有 这 些 方法 都 是 通过 在 浏览 器 (或 者 其 他 平台 ) 上 修改 
和 接收 数据 来 实现 的 。 许 多 其 他 应 用 包含 要 展示 在 UI 中 的 非常 复杂 的 数据 ， 人 们 可 以 理解 并 容 
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易 地 使 用 。 开 发 人 员 还 需要 有 能 力 维护 和 推断 这 些 界面 以 及 数据 如 何 通 过 界面 进行 流动 ， 因此 应 
用 处 理 数 据 的 方法 与 处 理 随 时 间 变 化 的 数据 的 能 力 是 一 样 重要 的 ,我 们 在 下 一 章 开 始 构 建 的 示例 
应 用 Letters Social 会 使 用 大 量 的 变化 数据 , 但 它 不 像 大 多 数 客户 应 用 或 商业 应 用 那样 复杂 。 我 们 
将 在 本 章 更 明确 地 阐述 它 ， 并 在 本 书 的 其 余部 分 继续 学 习 如 何 处 理 React 中 的 数据 。 


3.1.1 什么 是 状态 


让 我 们 简单 地 看 看 状态 ， 以 便当 我 们 查看 React 中 的 状态 时 可 以 更 好 地 理解 它 。 即 使 之 前 从 
未 明确 地 思考 过 或 听 说 过 程序 中 的 “状态 "， 但 至 少 可 能 见 过 它 。 大 部 分 程序 都 可 能 有 一 些 与 它 
们 对 应 的 状态 。 如 果 你 之 前 用 过 诸如 Vue、Angular 和 Ember 这 样 的 前 端 框架 ， 那 么 几乎 可 以 肯 
定 你 一 定编 写 过 拥有 某 种 状态 的 UI。React 组 件 也 有 状态 。 那 么 当 谈 及 “状态 ”时 ,我 们 究竟 讨 
论 的 是 什么 ? 试 试 下 面 这 个 定义 。 


状态 ”程序 在 特定 瞬间 可 访问 的 所 有 信息 。 


这 是 一 个 人 简化 的 定义 , 这 个 定义 可 能 忽略 了 一 些 学 术 上 的 细微 差别 , 但 就 我 们 的 目的 而 言 已 经 
足够 了 。 许多 学 者 编号 了 大 量 论文 致力 于 精确 定义 计算 机 系统 中 的 状态 , 但 对 我 们 而 言 ， 状 态 是 
程序 在 一 瞬间 可 访问 的 信息 。 这 包括 , 在 某 个 特定 时 刻 无 须 任何 额外 的 赋值 或 计算 就 能 够 引用 的 
所 有 值 ， 换 名 话说 ， 它 是 瞬间 对 某 个 程序 的 了 解 的 快照 。 

例如 ,这 可 能 包括 先前 创建 的 任何 变量 或 其 他 可 用 的 值 。 当 改变 一 个 变量 ( 而 不 是 用 它 获取 
值 时 )， 程 序 的 状态 就 会 被 改变 ， 它 与 之 前 不 一 样 了 。 仅 通过 读 取 你 就 可 以 检索 给 定时 刻 的 状态 ， 
但 当 你 随 着 时 间 的 推移 而 进行 了 某 些 修改 ,程序 的 状态 就 会 变化 。 从 技术 上 讲 ， 机 器 的 底层 状态 
在 使 用 时 每 时 每 刻 都 在 变化 ， 但 我 们 只 关心 程序 的 状态 。 - 

让 我 们 看 一 些 代码 并 逐 句 检查 代码 清单 3-1 中 的 简单 的 程序 状态 。 我 们 不 会 深入 那些 发 生 
在 幕后 的 所 有 底层 分 配 或 过 程 ， 我 们 只 是 尝试 更 清晰 地 认识 程序 中 的 数据 ， 以 便 更 容易 思考 
React 组 件 。 


代码 清单 3-1 简单 的 程序 状态 





将 letters 切 分 为 一 
个 字符 串 数组 


CONnst lJetters 三 TeGtteesS1， 保存 一 个 字符 串 


在 名 为 letters 的 变量 | 


const splitLetters = letters.split("''),; 
Sonsole,. Log ("Let s spell a word!"),; 


splitLetters.forEach (LIette => console.log(letter)); | 打印 出 一 条 消息 
| 
代码 清单 3-1 展示 了 一 个 简单 的 脚本 ， 它 进行 了 一 些 基本 赋值 和 数据 操作 并 将 其 输出 到 控制 


台 。 这 虽然 很 乏味 ,但 我 们 可 以 用 它 来 更 多 地 了 解 状态 。Javascript 采用 所 谓 的 “运行 至 完成 ”( run 
to completion ) 语义 ,这 意味 着 程序 将 按照 通常 被 认为 的 顺序 从 上 到 下 执行 。JavaScript 引擎 常常 
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会 以 意 想不到 的 方式 优化 代码 ， 但 它 仍然 以 与 原始 代码 一 致 的 方式 运行 。 

笠 试 从 上 到 下 了 逐 行 阅读 代码 清单 3-1 中 的 代码 。 如 果 想 用 浏览 器 的 调试 器 执行 它 ， 转 至 
https:/codesandbox.io/sn9mvolSx9p。 打开 浏览 右 的 开发 者 工具 , 逐步 执行 每 行 代码 并 查看 所 有 的 
变量 赋值 和 其 他 东西 。 

考虑 到 我 们 的 目的 ,让 我 们 将 每 行 代码 当 作 某 个 时 间 点 。 就 状态 的 简单 定义 “程序 在 特定 瞬 
间 可 访问 的 所 有 信息 ”， 如 何 描 述 应 用 在 某 个 时 刻 的 状态 ”注意 ,我们 让 事情 简单 化 了 并 忽略 了 
闭 包 、 垃 圾 收集 等 。 

(1) letters 是 一 个 变量 ,将 字符 串 “Letters” 赋 值 给 它 。 

(2 ) 通过 从 letters 拆 分 出 每 个 字符 创建 了 splitLetters，letters 仍旧 可 用 。 

(3 ) 来 目 步 又 1 和 步骤 2 的 所 有 信息 都 可 用 ， 一 个 消息 被 发 送 到 控制 台 。 

(4 ) 程序 遍历 数组 中 的 每 一 项 并 打印 输出 一 个 字符 。 这 一 过 程 可 能 瞬间 发 生 几 次 ， 因 此 对 
Array.forEach 可 用 的 信息 对 程序 也 可 用 。 

随 独 程序 回 前 执行 ,状态 随时 间 发 生变 化 , 更 多 的 信息 变 得 可 用 ,因为 任何 信息 都 没有 被 删 
除 而 且 引用 也 没有 被 改变 。 表 3-1 展示 了 可 用 信息 是 如 何 随 着 程序 加 前 执行 而 增加 的 。 


表 3-1 每 一 步 的 状态 


步骤 程序 可 用 的 状态 
] letters = "Letters" 
) letters = "Letters" 
de 
3 letters = "Letters" 
i i 
letters = "Letters" 
Dt 人 te = TE Vem te wp i a a 
对 于 从 0 到 splitLetters 长度 的 各 子 步 对 


letter = "L" (接着 是 "e"、"t" 等 ) 


试 着 走 查 目 己 的 代码 并 思考 程序 的 每 一 行 可 以 用 什么 信息 。 
是 这 样 做 的 , 因为 我 们 不 必 一 次 性 考虑 每 个 可 能 的 维度 一 一 但 即便 是 对 于 简单 的 程序 也 有 大 量 的 
言 息 可 用 。 

我 们 可 以 认真 考虑 的 一 个 因素 是 ， 当 运行 的 程序 变 得 相当 复杂 时 ( 就 像 最 简单 的 UI 也 倾向 于 
变 得 复杂 )， 对 其 的 推理 认 知 会 变 得 很 困难 。 我 的 意思 是 ， 系 统 的 复杂 性 可 能 很 难 一 下 子 都 记 住 ， 
而 且 系统 中 的 逻辑 很 难 让 人 彻底 想 清楚 。 大 多 数 程序 就 是 如 此 ， 但 涉及 UI 构建 时 则 尤为 困难 。 

现代 浏览 需 应 用 的 UI 常常 代表 了 多 种 技术 的 交集 , 包括 服务 器 提供 数据 、 样 式 和 布局 API、 
JavaScript 框架 、 浏 览 右 API 等 。UI 框架 上 的 进展 旨 在 简化 这 个 问题 ， 但 它 仍 是 一 个 挑战 。 随 着 
Web 应 用 越 来 越 普及 并 融入 社会 和 日 常生 活 中 , 这 个 挑战 往往 会 随 着 人 们 对 这 些 应 用 的 期 望 变 大 
而 增加 。 如 果 React 是 有 用 的 ， 它 需要 帮助 我 们 减少 或 屏蔽 一 些 现代 UI 的 极度 复杂 的 状态 。 希 
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望 诸位 会 认识 到 React 确实 能 做 到 这 一 点 。 但 如 何 做 到 的 呢 ? 一 种 方法 是 提供 两 个 处 理 数 据 的 特 
定 API: 属性 (props ) 和 状态 ( state )。 


3.1.2 可 变 状 态 与 不 可 变 状 态 


在 React 应 用 中 ， 有 两 种 主要 的 方法 来 处 理 组 件 中 的 状态 ， 即 通过 可 以 改变 的 状态 和 通过 不 
能 改变 的 状态 。 我 们 在 这 里 进行 了 简化 : 应 用 中 存在 多 种 类 型 的 数据 和 状态 。 可 以 用 许多 不 同 的 
方式 表示 数据 ， 如 二 叉 树 、Map 或 Set, 或 者 常规 JavaScript 对 象 。 但 与 React 组 件 中 的 状态 进行 
通信 和 交互 的 方法 归结 为 这 两 类 , 在 React 中 , 它们 被 称 为 状态 ( state )( 可 以 在 组 件 中 改变 的 数 
据 ) 和 属性 ( props ) (组 件 接收 并 且 不 应 该 被 组 件 改 变 的 数据 )。 
你 可 能 听 说 过 状态 和 属性 被 称 为 可 变 的 与 不 可 变 的 。 这 在 一 定 程度 上 是 对 的 ， 因 为 JavaScript 
并 未 原生 地 支持 真正 的 不 可 变 对 象 ( Symbol 也 许 是 , 但 它 超出 本 书 的 范围 了 )。 在 React 组 件 中 ， 
状态 通常 是 可 变 的 ， 而 属性 不 应 该 被 改变 。 在 潜心 于 React 特定 的 API 之 前 ， 让 我 们 先 稍微 深入 
地 探索 可 变性 与 不 可 变性 思想 。 
在 第 2 半 中 ， 当 状态 被 称 为 可 变 的 时 ,意思 是 我 们 可 以 履 盖 或 更 新 该 数据 ( 例如 可 以 被 覆盖 
的 变量 )。 男 一 方面 ， 不 可 变 状态 是 不 能 锌 改变 的 。 还 有 不 可 变数 据 结构 ， 其 只 能 通过 受 控 的 方 
式 进行 改变 ( 这 是 React 中 的 状态 API 的 工作 方式 )。 当 在 第 10 间 和 第 11 章 中 学 习 Redux 时 会 
模拟 不 可 变数 据 结 构 。 
我 们 可 以 稍微 扩展 一 下 可 变 的 和 不 可 变 的 概念 ， 将 相应 的 数据 结构 类 型 包括 进来 。 
图 不 交 的 一 一 一 个 不 可 变 的 持久 数据 结构 ， 随 着 时 间 的 推移 可 以 支持 多 个 版 本 ,但 不 能 直 
接 窗 盖 ; 不 可 变数 据 结构 通常 是 持久 的 。 
国 可 变 的 一 一 一 个 可 变 的 临时 数据 结构 ， 随 着 时 间 的 推移 只 文 持 一 个 版 本 ; 可 变 的 数据 结 
构 在 其 变化 时 可 以 被 覆盖 并 日 不 支持 其 他 版 本 。 
图 3-1 展示 了 这 些 概念 。 


可 变 的 (临时 ) 数据 结构 不 可 变 的 (持久 ) 数据 结构 
v2 
V3 
v4 
当前 的 > 


图 3-1 不 可 变数 据 结 构 与 可 变数 据 结构 中 的 持久 性 和 临时 性 。 不 可 变 或 持久 的 数据 结构 常常 记录 一 段 
历史 并 且 不 会 改变 ， 但 会 对 随 着 时 间 的 推移 发 生 的 变化 进行 版 本 化 。 但 是 ， 临 时 数据 结构 通常 
不 记录 历史 并 且 随 着 每 次 更 新 都 会 被 抛弃 
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另 一 种 考虑 不 可 变数 据 结构 和 可 变 的 数据 结构 之 间 的 区 别 的 方法 是 考虑 这 两 种 数据 结构 各 目 拥 有 
的 不 同 能 力 和 内 存 。 临 时 数据 结构 只 有 能 力 保 存 一 瞬间 的 数据 ， 而 持久 数据 结构 则 能 够 记录 数据 随时 
间 的 变动 情况 。 这 正 是 让 不 可 变数 据 结构 的 不 可 变性 变 得 更 加 清晰 的 所 在 : 只 制作 状态 的 副本 一 一 它 
们 没有 被 替换 。 旧 状态 被 新 状态 替代 ， 但 数据 却 没有 被 奉 换 。 图 3-2 展示 了 变化 是 如 何 发 生 的 。 

可 变 的 (临时 ) 数据 结构 不 可 变 的 持久) 数据 结构 


新 数据 





当前 的 v6 
图 3-2 处理 可 变数 据 和 不 可 变数 据 的 变化 。 临 时 数据 结构 没有 版 本 ， 所 以 当 更 改 它们 时 ， 所 有 以 前 的 
状态 都 消失 了 。 它 们 可 以 说 是 活 在 当下 ， 而 不 可 变数 据 结构 能 够 随时 间 的 推移 而 持续 存在 


提示 考虑 不 可 变性 与 可 变性 的 另 一 种 方法 是 考虑 “保存 ”和 “另存 为 ”之 间 的 区 别 。 许 多 电脑 

程序 能 够 保存 文件 的 当前 状况 或 者 用 不 同 的 名 字 保 存 当前 文件 的 副本 。 不 可 变数 据 类 似 于 在 保存 它 

时 保存 了 一 个 副本 ， 而 可 变数 据 则 能 够 就 地 覆盖 。 

尽管 JavaScript 本 身 不 支持 真正 的 不 可 变数 据 结构 , React 用 可 变 的 方式 暴露 组 件 的 状态 ( 通 
过 setState 进行 改变 ) 并 将 属性 作为 只 读 的 。 通 常 不 可 变性 和 不 可 变数 据 结 构 还 有 更 多 知识 ， 
但 是 我 们 对 此 的 关注 无 须 超过 我 们 对 它们 已 有 的 了 解 。 如 果 仍 想 了 解 更 多 , 有 学 术 人 研究 在 关注 这 


类 问题 。 通 过 Immutable JS 这 样 的 库 也 能 在 JavaScript 应 用 中 广泛 地 使 用 不 可 变数 据 结构 ， 但 在 
React 中 我 们 只 需 应 对 属性 API 和 状态 API。 
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现在 我 们 已 经 学 习 了 更 多 有 关 状 态 和 (不 ) 可 变性 的 知识 。 所 有 这 些 知 识 如 何 纳入 React 中 ? 
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好 吧 ， 我 们 在 上 一 章 已 经 了 解 了 一 点 props API 和 state API， 因 此 可 以 料想 到 它们 必定 是 构建 组 
件 方 式 的 重要 组 成 部 分 。 事 实 上 ， 它 们 是 React 组 件 处 理 数 据 和 彼此 间 通 信 的 两 种 主要 方法 。 


3.2.1 React 中 的 可 变 状 态 : 组 件 状态 


让 我 们 从 状态 API 开始 。 虽 然 我 们 可 以 说 所 有 组 件 都 有 某 种 “状态 ”( 一般 概念 ), 但 并 不 
是 React 中 的 所 有 组 件 都 有 本 地 组 件 状 态 。 从 现在 起 ， 当 我 提 到 状态 ( state ) 时 ,我 是 在 谈论 
React 的 API， 而 不 是 一 般 概 念 。 继 承 自 React .Component 类 的 组 件 可 以 访问 该 API。React 
会 为 以 此 方式 创建 的 组 件 建立 并 追踪 一 个 支撑 实例 。 这些 组 件 还 可 以 访问 下 一 章 将 讨论 的 一 系 
列 生命 周期 方法 。 

通过 this.state 可 以 访问 那些 继承 目 React .Component 的 组 件 的 状态 ,在 这 种 情况 下 ， 
this 引用 的 是 类 的 实例 , 而 state 则 是 一 个 React 会 进行 追踪 的 特殊 属性 。 你 可 能 认为 只 要 对 
state 进行 赋值 或 者 修改 state 的 属性 就 能 够 更 新 state, 但 情况 并 非 如 此 。 让 我 们 看 看 代码 
清单 3-2 中 一 个 简单 React 组 件 中 的 组 件 状态 示例 。 你 可 以 在 本 地 机 器 上 创建 这 个 代码 。 或 者 直 
接 访 问 https://codesandbox.io/s/ovxpmn340y。 





代码 清单 3-2 ”使 用 setState 修改 组 件 状 态 


import React from "react™"} 
import { render } from "react-dom"; 


class Secret extends React.Component 1 创建 一 个 React 组 
constructor (props) 1{ 为 组 件 提供 一 个 初始 状态 以 便 件 ， 随 着 时 间 的 推 
人 在 render(0) 中 尝试 访问 它 时 不 会 移 , 它 会 访问 持久 的 
; = 、 和 :已 六 太 
a tO eet 返回 undefined 或 抛 出 错误 组 件 状态 别 起 
}; 了 将 类 方法 绑 定 到 
thtiswenButtoncCliek = 上 has.DnButtcoRnCLLEIK YIGQ(thdisy ， 组 件 实 例 上 
} 
ONnButtonClicek(t) 4 
hi . 一 ia » 
sa A 初 识 setState， 它 是 用 于 修改 组 件 状态 
name: Mark 
到 的 专用 API。 调 用 setState 时 提供 一 个 
} 回调 清 数 , 该 函数 会 返回 一 个 新 状态 对 
render () { 象 供 React 使 用 
return ( 
<div> 


<hl>My name is {this.state.name}</hl> 
<bUutton onClick={this., onButtonClick}>reveal the secret </BPutton> 


/diy> 
将 显示 名 字 的 函数 绑 定 到 
四 由 按钮 发 出 的 点 击 事件 上 
将 顶层 组 件 浑 染 到 应 用 最 高 层 的 HTML 
document .getElementById('root') 元 素 中 可 以 用 各 种 方式 确定 容 需 ， 只 





); 要 ReactDOM 能 够 找到 它 
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代码 清单 3-2 创建 了 一 个 简单 的 组 件 ， 当 点 击 按钮 时 会 使 用 setState 更 新 组 件 状态 从 而 揭示 
秘密 的 名 字 。 注意 , 在 this 上 可 以 使 用 setState, 这 是 因为 组 件 继承 了 React .Component 类 。 

当 点 击 按钮 时 ， 点 击 事件 将 被 触发 ， 提 供给 React 用 于 响应 事件 的 函数 会 被 执行 。 当 函数 执 
行 时 ， 它 会 用 一 个 对 象 作 为 参数 来 调用 setState 方法 。 这 个 对 象 有 一 个 指 疝 字符 串 的 name 
属性 。React 会 安排 更 新 状态 。 当 更 新 发 生 后 ，React DOM 会 在 需要 时 更 新 DOM。render 函 
数 会 被 再 次 调用 ， 但 这 一 次 会 有 一 个 不 同 的 值 提 供给 包含 this .state.name 的 JSX 表达 式 语 
法 ({} )。 它 会 展示 “Mark” 而 不 是 “top secret!”， 我 的 秘密 身份 就 骏 露 了 ! 

通常 情况 下 ,由 于 性 能 和 复杂 性 的 影响 ， 开 发 者 想 要 尽 可 能 谨慎 地 使 用 setState ( React 会 为 
开发 者 追踪 一 些 东 西 ， 而 开发 者 则 要 在 心里 追踪 另 一 部 分 数据 )。 有 些 模 式 在 React 社区 中 广 受 
欢迎 ， 它 们 能 够 使 你 几乎 不 使 用 组 件 状 态 (包括 Redux、Mobx、Flux 等 )， 这 些 值得 作为 应 用 的 
可 选项 进行 探索 一 一 实际 上 ， 我们 会 在 第 10 章 和 第 11 章 介绍 Redux。 尽 管 通常 最 好 是 使 用 无 状 
态 困 数 组 件 或 者 是 依赖 像 Redux 这 样 的 模式 ,但 使 用 setState 本 身 并 不 是 糟糕 的 做 法 一 一 它 仍 然 
是 修改 组 件 中 数据 的 主要 API。 

继续 之 前 ， 需 要 注意 绝对 不 要 直接 修改 React 组 件 中 的 this .state。 如 果 尝 试 直接 修改 
this.state, 之 后 调用 setState () 可 能 蔡 换 掉 已 做 出 的 改变 ， 更 糟糕 的 是 ，React 并 不 知道 
对 状态 所 做 的 变化 。 即 使 可 以 将 组 件 状态 当 作 可 以 改变 的 东西 ， 但 仍 应 该 将 this .state 看 作 
是 在 组 件 内 不 可 改变 的 对 象 ( 就 像 props 一 样 )。 

这 之 所 以 重要 还 在 于 setState () 不 会 立即 改变 this .state。 相反 , 它 创 建 了 一 个 挂 起 的 状态 转 
换 (下 一 章 将 更 为 深入 地 探讨 演 染 和 变更 检测 )。 因此, 调用 setState 方法 后 访问 this .state 可 能 
会 返回 现 有 值 。 因 为 所 有 这 一 切 都 使 得 调试 情况 变 得 棘手 ， 所 以 只 使 用 setState () 来 更 改组 件 状态 。 

即使 是 像 代 码 清单 3-2 中 的 小 交互 ， 也 发 生 了 很 多 事情 。 我 们 将 在 后 续 章节 中 继续 分 解 React 
执行 组 件 更 新 时 所 发 生 的 种 种 步骤 , 但 现在 , 更 仔细 地 研究 组 件 的 render 方法 则 更 为 重要 。 请 
注意 ， 即 便 执行 了 状态 改变 并 修改 了 相关 数据 ， 它 仍 会 以 一 种 相对 可 理解 和 可 预测 的 方式 发 生 。 

尤其 美妙 的 是 , 开发 者 可 以 一 次 性 声明 期 望 的 组 件 外 观 和 结构 。 没 必要 为 了 两 个 可 能 存在 的 
不 同 状 态 做 大 量 额 外 工作 ( 展示 或 不 展示 高 度 机 密 名 字 )。React 处 理 所 有 底层 的 状态 绑 定 和 更 新 
过 程 ， 开 发 者 只 需要 说 “名 字 应 该 在 这 里 ”。React 的 好 处 在 于 它 不 会 强迫 你 思考 每 部 分 状态 在 
每 个 时 刻 的 情况 ， 就 像 3.1.1 节 所 做 的 那样 。 

让 我 们 更 仔细 地 了 解 一 下 setState API。 它 是 改变 React 组 件 中 的 动态 状态 的 主要 方法 , 并 且 
在 应 用 中 经 常会 使 用 它 。 让 我 们 看 一 下 方法 签名 ， 了 解 需要 给 它 传递 什么 : 

SetState ( 

updater， 
[callback] 

) -> void 

setState 接收 一 个 用 来 设置 组 件 新 状态 的 函数 以 及 一 个 可 选 的 回调 函数 。updatezt 郴 数 
的 签名 如 下 : 


(prevState, props) => stateChange 
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之 前 版 本 的 React 允许 传递 一 个 对 象 而 不 是 函数 作为 setState 的 第 一 个 参数 。 之 前 版 本 的 
React 与 当前 版 本 的 React ( 16 及 以 上 ) 的 一 个 关键 区 别 在 于 : 传递 对 象 暗示 着 setState 本 质 
上 是 同步 的 , 而 实际 发 生 的 情况 是 React 会 安排 一 个 对 状态 的 更 改 。callback 格式 的 签名 更 好 
地 传递 了 这 个 信息 并 且 更 符合 React 的 全 面 声明 性 异步 范式 : 容许 系统 ( React ) 安排 更 新 , 保证 
顺序 但 不 保证 时 间 。 这 与 一 种 更 加 声明 式 的 UI 方法 相 契 合 ， 而 且 这 比 用 命令 式 的 方式 在 不 同时 
刻 指 定数 据 更 新 ( 常常 是 苑 态 条 件 的 源 果 ) 更 易于 思考 。 

如 果 需 要 根据 当前 状态 或 属性 对 状态 做 一 下 更 新 ， 可 以 通过 PrevState 和 Props 参数 来 
访问 这 些 状 态 和 属性 。 当 要 实现 类 似 Boolean 切换 的 东西 或 者 在 执行 更 新 前 需要 知道 上 一 个 值 时 ， 
这 通常 很 有 用 。 

让 我 们 对 setState 的 机 制 投注 更 多 的 关注 。setState 会 使 用 updater 图 数 返回 的 对 象 与 
当前 状态 进行 浅 合并 。 这 意味 着 , 开发 人 员 可 以 生成 一 个 对 象 ， 而 React 会 将 该 对 象 的 顶级 属性 合并 到 
状态 中 。 例如 , 有 一 个 对 象 有 属性 A 和 属性 B, B 有 一 些 深层 舱 套 的 属性 而 A 只 是 一 个 字符 串 ( 'hi!"' )。 
由 于 执行 的 是 浅 合并 ， 因 此 只 有 顶级 属性 和 它们 引用 的 部 分 得 以 保留 ， 而 不 是 B 的 每 个 部 分 。React 
不 会 寻找 B 的 深层 敬 套 属性 进行 更 新 。 解 决 这 个 问题 的 方法 是 制作 对 象 的 副本 ,深层 更 新 它 ， 而 后 
使 用 更 新 后 的 对 象 。 也 可 以 用 immutable .js 这 样 的 库 来 让 处 理 React 的 数据 结构 更 容易 。 

setState 是 一 个 用 起 来 很 直观 的 API， 为 ReactClass 组 件 提供 一 些 需要 合并 到 当前 状态 中 的 数据 ， 
React 会 为 你 把 它 处 理 好 。 如 果 由 于 某 些 原因 而 需要 监听 过 程 的 完成 情况 ,可 以 使 用 可 选 的 callback 
函数 挂 载 到 该 过 程 。 代 码 清单 3-3 展示 了 setState 的 一 个 实际 的 浅 合并 的 例子 。 像 之 前 一 样 ， 使 用 
CodeSandbox 可 以 很 容易 地 创建 和 运行 React 组 件 。 这 可 以 省 去 在 自己 机 人 磊 上 进行 设置 的 碾 烦 。 


代码 清单 3-3 ”使 用 setState 进行 浅 合并 





import React from "react",; 
ijmport { render } from "react-dom"; 
class ShallowMerge extends React.Component { 
construdietor(proeops) 1 
super (props); 
this.state = { 


user: 1 

name: "Mark', // 

colorss 1 name 存在 于 初始 state 的 
ETOrTtOE user 属性 中 ……: 


} 
} 
}; 
this.onButtonClick = this. onBuattonCliek. bind (this);» 
} 
GnBittoncllick() | 
this.setStatelt{ 


user: { // | 
colors: 1 pe 但 正在 设置 的 state 中 并 没有 
'blue' 


favorite: name 一 一 如 果 它 在 上 一 级 的 话 ， 浅 
} 合并 就 不 会 发 挥 作用 了 


} 
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由 
} 
render() { 
return ( 
«<div> 
<hl>My favorite color is {this.state.user.colors.favorite} and my 
name is {this.state.user.hame}</h1> 
<button onClick={this.onButtonClick}>show the color!</button> 
</div> 
) 
} 
} 


render( 

<ShallowMerge />， 

document .getElementBylId("'root') 
) ; 


初学 React 时 ， 忘 记 浅 合 并 是 常见 的 问题 来 源 。 在 这 个 示例 中 ， 当 点 击 按钮 时 ， 内 嵌 在 初始 
状态 的 user 键 内 的 name 属性 会 被 覆盖 ， 因 为 新 状态 中 没有 它 。 本 来 打算 保持 这 两 个 状态 ， 但 
一 个 覆盖 了 另 一 个 : 
练习 3-1 思考 setState API 二 
相近 React 和 再 组件 内 关 的 组 伯 APl 所 及 的 事情 之 主要 和 seSiils API 来 公关 太 ， 
而 不 是 直接 修改 。 为 什么 这 是 一 个 问题 而 且 为 什么 那样 做 行 不 通 呢 ? 试 试 httpsycodesandboxiolsj7p8 324jn fo 
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我 们 已 经 讨论 了 React 如 何 通 过 状态 和 setState 以 可 变 的 方式 处 理 数据 , 但 React 中 的 不 
可 变数 据 怎么 样 呢 ? React 中 ， 属 性 ( props ) 是 传递 不 可 变数 据 的 主要 方式 ， 所 有 组 件 都 能 接收 

属性 (不 只 是 继承 自 React .Component 的 组 件 ) 并 能 在 其 构造 子 数 、render 和 生命 周期 方 
法 中 使 用 它们 。 

React 中 的 属性 或 多 或 少 是 不 可 变 的 ,使 用 库 和 其 他 工具 能 够 模拟 组 件 中 的 不 可 变数 据 结构 ， 
但 React 的 props API 本 身 是 半 不 可 变 的 。 如 果 JavaScript 原生 的 Object .freeze 方法 可 用 的 
话 ，React 会 使 用 它 防止 添加 新 属性 或 移 除 现 有 属性 。object .freeze 也 能 防止 现 有 属性 (或 
其 可 枚 举 性 、 可 配置 性 和 可 写 性 ) 被 修改 并 防止 原型 被 修改 。 这 很 大 程度 上 防止 修改 props 对 
象 ， 但 它 在 技术 上 并 不 是 真正 的 不 可 变 对 象 (尽管 可 以 这 样 想 )。 

属性 是 传递 给 React 组 件 的 数据 , 要 么 来 自 父 组 件 要 么 来 自 组 件 自身 的 defaultProps 静态 方法 。 
然而 组 件 状态 只 限于 单个 组 件 ， 属 性 通常 由 父 组 件 传 递 。 如 果 开 发 人 员 想 :“ 我 是 否 能 用 父 组 件 的 状态 
将 属性 传递 给 子 组 件 ? ”， 那 么 你 算 想 到 些 事 了 。 一 个 组 件 的 状态 可 以 是 另 一 个 组 件 的 属性 。 

属性 通常 在 JSX 中 作为 属性 进行 传递 , 但 如 果 使 用 React . createElement 的 话 , 则 可 以 
通过 该 接口 直接 将 它们 传递 给 子 组 件 。 可 以 将 任何 有 效 的 JavaScript 数据 作为 一 个 属性 传递 给 其 
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他 组 件 ， 甚 至 可 以 传递 组 件 (它们 毕 竞 只 是 类 而 已 )。 一 旦 属性 被 传递 给 组 件 使 用 ， 就 不 能 在 组 
件 内 部 改变 它们 。 尽 可 以 尝试 , 但 可 能 会 得 到 一 个 像 Uncaught TypeError: Cannot assign 
to read-only property'<myProperty>'ofobject'#<Object>' 这 样 的 错误 ,或 者 更 
糟 ，React 应 用 将 无 法 如 预期 一 样 工 作 ， 因 为 违反 了 预期 的 使 用 方式 。 

下 一 节 中 的 代码 清单 3-4 展示 了 访问 属性 的 方式 以 及 如 何不 给 它们 赋值 。 如 前 所 述 ， 属 性 可 
以 随时 间 改 变 ， 但 不 是 从 组 建 内 部 改变 。 这 是 单项 数据 流 的 一 部 分 ， 后 续 草 刷 会 普兰 这 个 主题 。 
简 而 言 之 , 单 向 意味 着 从 父 组 件 到 子 组 件 一 路 加 下 改变 数据 流 。 一 个 使 用 状态 的 父 组 件 〈 继承 目 
React .Component ) 可 以 改变 自己 的 状态 ,这 个 改变 的 状态 可 以 作为 属性 传递 给 子 组 件 ， 从 而 
改变 属性 。 


练习 3-2 在 render 方法 中 调用 setState 

我 们 已 经 明确 ， setState 是 更 新 组 件 状 态 的 方法 。 可 以 在 哪里 调用 setstate? 我 们 将 在 下 一 
章 了 解 组 件 生命 周期 的 哪个 点 可 以 调用 setState) 但 现在 让 我 们 先 将 注意 力 只 放 在 render 方法 上 。 
当 在 组 件 的 render 方法 中 调用 setstate 会 发 生 什么 ? 去 https://codesandbox. io/s/48zv2nwqww 


0 
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当 使 用 属性 时 ， 有 些 API 可 以 在 开发 过 程 中 提供 帮助 : PropTypes 和 默认 属性 。PropTypes 
提供 了 类 型 检查 功能 ,可 以 用 它 指定 组 件 期 望 接收 什么 样 的 属性 。 可 以 指定 数据 类 型 ， 甚 至 可 以 
告诉 组 件 的 使 用 者 需要 提供 什么 形式 的 数据 〈 例 如 ， 一 个 拥有 user 属性 的 对 象 ，user 属性 包 
含 特定 的 键 )。 在 之 前 版 本 的 React 中 ，PropTypes 是 核心 React 库 的 一 部 分 ， 但 它 现在 作为 
prop-types 包 单 独 存在 。 

prop-types 库 并 非 魔 法 一 一 它 是 一 组 能 够 帮助 你 对 输入 进行 类 型 检查 的 也 数 和 属性 一 一 
可 以 在 其 他 库 中 很 容易 地 用 它 来 对 输入 进行 类 型 检查 。 例 如 ， 可 以 将 prop-types 引入 另 一 个 
类 似 于 React 的 组 件 驱 动 框架 ( 如 Preact ) 并 用 相似 的 方式 使 用 它 。 

要 为 组 件 设 置 PropTypes， 需 要 在 类 上 提供 一 个 叫 作 propTypes 的 静态 属性 。 注 意 代码 清 
单 3-4, 在 组 件 类 上 设置 的 静态 属性 的 名 字 是 以 小 写字 母 开头 的 , 而 从 prop-types 库 访问 的 对 
象 名 是 以 大 写字 母 开 头 的 (PropTypes )。 为 了 指定 组 件 需 要 哪个 属性 ,需要 添加 要 验证 的 属性 
名 并 为 其 分 配 一 个 来 自 prop-types 库 默认 导出 ( import PropTypes from 'Prop-types' ) 
的 属性 。 使 用 PropTypes 可 以 为 属性 声明 任何 类 型 、 形 式 和 必要 性 ( 可 选 还 是 强制 )。 

男 一 个 可 以 让 开发 体验 更 为 简单 的 工具 是 默认 属性 还 记得 如 何 使 用 类 的 构造 方法 
( constructor ) 为 组 件 提 供 初 始 状态 ? 也 可 以 为 属性 做 类 似 的 事情 。 你 可 以 通过 一 个 名 为 
defaultProps 的 静态 属性 来 为 组 件 提 供 默 认 属性 。 使 用 默认 属性 可 以 帮助 确保 组 件 拥有 运行 所 需 
的 东西 ， 即 便 使 用 组 件 的 人 忘记 为 其 提供 属性 。 代 码 清 单 3-4 展示 了 在 组 件 中 使 用 PropTypes 和 默 
认 属 性 的 例子 。 你 可 以 前 往 https://codesandbox.io/ s/31ml5pmk4m 运行 代码 。 
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代码 清单 3-4 ”React 组 件 的 不 可 变 属 性 





import React from "react™"; 

import { render } from "react-dom"; 

import PropTypes from "prop-types"; 
\ 


| 
elass Counter extends React.Component 1 | 指定 一 个 描述 “形式 ”的 对 象 


static propTypes = 1 
incrementBy: PropTypes.number, 
onIncrement: PropTypes.func.isRequired 


ji 可 以 为 任何 propTypes 链接 
static defaultProps = 1 isRequired 从 而 确保 在 属性 没 
incrementBy: 1 有 出 现时 展示 警告 


上 


CoOnstruCtor(props) 4 
super (props); 
this.state = { 
Counits 0 
和 
this. onButtonClLiek = this.onButtonCliek. bina (Ehis) » 
} 
ONnButteonClLick() { 
this.setState (function (prevState, props) { 
return { count: prevState.count + props.incrementBy }; 
jy» 
} 
render() 1{ 
return (人 
执 亿 二 本 之 
<hl>{this.state. count}</hl> 
<Button onClick={(this. onButtonClick}S++« /Button> 
/LTS 
); 
} 
} 


render (<Counter incrementBy={1} />, document .getElementById("root")); 


3.2.4 无 状态 函数 组 件 


要 做 些 什 么 才能 创建 只 使 用 属性 并 且 没 有 状态 的 简单 组 件 ? 这 是 通常 的 使 用 情况 , 特别 是 我 
们 之 后 将 探索 的 一 些 和 常见 的 对 React 友好 的 应 用 架构 模式 ， 如 Flux 和 Redux。 在 这 些 情况 下 , 我 
们 通常 布 望 将 状态 保存 在 一 个 中 心 位 置 而 不 是 分 散 保 存 到 组 件 中 。 但 其 他 情形 中 只 使 用 属性 也 是 
有 用 的 。 如 果 React 不 必 管 理 文 撑 实 例 ， 那 么 减少 应 用 在 资源 使 用 上 的 损耗 也 是 不 错 的 。 

事实 证 明 ， 可 以 创建 一 种 只 使 用 属性 的 组 件 : 无 状态 函数 组 件 。 这 些 组 件 有 时 被 开发 人 员 称 
为 无 状态 组 件 、 果 数组 件 和 其 他 类 似 的 名 字 , 这 一 点 有 时 让 人 很 难 了 解 正在 讨论 的 内 容 。 它 们 通 
常 指 的 是 同一 件 事 一 一 一 个 没有 继承 React .Component 的 组 件 ， 因 此 不 能 访问 组 件 状 态 或 其 
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他 生命 周期 方法 。 

不 足 为 奇 , 无 状态 功能 组 件 只 是 不 能 访问 或 使 用 React 的 状态 API ( 或 继承 目 React .Component 
的 其 他 方法 ) 的 组 件 。 它 之 所 以 没有 状态 并 不 是 因为 它 没有 任何 种 类 的 (一般 ) 状态 ， 而 是 因为 
它 不 会 获得 React 进行 管理 的 支撑 实例 。 这 意味 着 没有 生命 周期 方法 ( 第 4 章 会 涵盖 )， 没 有 组 
件 状 态 ， 并 且 可 能 占用 更 少 的 内 存 。 

无 状态 孔 数 组 件 是 函数 ， 因 为 它们 可 以 被 编写 为 命名 限 数 或 是 赋值 给 变量 的 匿名 晴 数 表达 
Ts 它们 只 接收 属性 , 而 且 对 于 给 定 的 输入 它们 会 返回 相同 的 输出 , 因此 基本 上 被 认为 是 纯 限 数 。 

这 使 得 它们 很 快 ， 因 为 React 有 可 能 通过 避免 不 必要 的 生命 周期 检查 或 内 存 分 配 来 进行 优化 。 代 
人 码 清单 3-5 展示 了 无 状态 函数 组 件 的 例子 ,你 可 以 前 往 https://codesandbox.io/s/1756002969 运行 
代码 。 


代码 清单 3-5 无 状态 函数 组 件 





import React from "react"; 
import { render } from "react-dom"; 
import PropTypes from "prop-types"; 


function Greeting (props) { 
return <div>Helleo {props .for} 1</div>? 
} 


对 于 任何 形式 的 无 
reeting.propTypes = { oe 2 : 
for: PropTypes.string.isRequired 状态 函数 组 件 , 可 以 

有 用 函数 或 变量 的 属 可 以 使 用 也 

性 来 指定 propTypes 数 或 匿名 也 

Greeting.defaultProps = 1 和 默认 属性 数 创 建 无 状 

于 可 于 于 区 人 人 曙 sk y 
呈 态 函数 组 件 


render (<Greeting for="Mark" />, mountNode); 


// 或 者 使 用 箭头 图 数 

// const Greeting = (props) => <div>Hello {props.for}</div>; 

// 像 之 前 那样 指定 PropTypes 和 默认 属性 

// render (<Greeting name="Mark" />, document .getElementById("root")),; 

无 状态 函数 组 件 很 强大 , 特别 是 与 拥有 文 撑 实例 的 父 组 件 结合 使 用 时 。 与 其 在 多 个 组 件 间 设 
置 状态 ， 不 如 创建 单个 有 状态 的 父 组 件 并 让 其 余部 分 使 用 轻 量 级 子 组 件 。 第 10 章 和 第 11 章 中 ， 
我 们 会 使 用 Redux 将 这 个 模式 提升 到 全 新 的 水 平 。 使 用 Redux 的 React 应 用 常 弟 会 创建 更 少 的 有 
Gia : Elem elas 傅 况 ) ( 可 是 指 store )。 


件 的 状态 来 修改 另 一 个 组 件 的 属性 Ca 

ee 

be ee gd 全 的 和 
Ys/ ageg71975 进行 尝试 。， | A es 








3.3 组 件 通信 65 


3.3 ”组件 通信 


当 构 建 简单 的 评论 框 组 件 时 ， 我 们 已 经 看 到 能 够 用 其 他 组 件 创建 组 件 。 这 是 React 特别 棒 的 
原因 之 一 。 开 发 人 员 能 够 轻易 地 用 子 组 件 构建 其 他 组 件 ,与 此 同时 还 能 够 保持 事物 良好 地 捆绑 在 
一 起 ， 并 且 还 能 很 容易 地 表示 组 件 间 的 is-a 和 has-a 关系 。 这 意味 着 可 以 将 组 件 看 作 组 件 的 一 部 
分 或 是 一 种 特定 的 东西 。 

能 够 混合 和 匹配 组 件 并 灵活 地 构建 东西 是 很 棒 的 , 但 如 何 让 它们 彼此 通信 呢 ? 许多 框架 和 库 
提供 了 框架 特有 的 方法 让 应 用 的 不 同 部 分 彼此 通信 。Angularjs 或 Emberjs 中 ， 你 可 能 听 说 过 或 
曾经 使 用 服务 在 应 用 的 不 同 部 分 之 间 进 行 通信 。 通常 这 些 是 广泛 可 用 的 长 期 对 象 , 开发 人 员 可 以 
在 其 中 存储 状态 并 从 应 用 的 不 同 部 分 进行 访问 。 

React 使 用 了 服务 或 类 似 的 东西 吗 ?” 没 有 。 在 React 中 ， 如 采 想 让 组 件 彼此 通信 ， 需 要 传递 
属性 ， 并 且 当 传递 属性 时 ， 开 发 人 员 做 了 两 件 简 单 的 事情 : 

四 访问 父 组 件 中 的 数据 (要么 是 状态 要 么 是 属性 ); 

加 传递 数据 给 子 组 件 。 

代码 清单 3-6 的 示例 既 展 示 了 你 熟悉 的 父子 关系 ， 也 展示 了 所 属 关 系 。 你 可 以 前 往 
https://codesandbox.io/s/ pm18mlz8jm 运行 代码 。 


代码 清单 3-6 ”从 父 组 件 向 子 组 件 传递 属性 


import React from "react"; 
import { render } from "react-dom"; 
import PropTypes from "prop-types",，; 





const UserProfile = props => { 
return ximg src={ httpBs: /7 大 大火 大 大业 二 和 iiCON SG .Drops. Username} } />; 
}; 创建 一 个 返回 示例 图 片 的 无 状态 函数 组 件 | 
UserProfile.propTypes = { 

pagename: PropTypes.string 
数组 件 上 , 仍 可 以 指定 默 
Userprofile.defaultProps = 1{ 认 属 性 和 propTypes 

pagename: "erondu" + 


}; 


const UserProfileLink = props => 1 
return <a href={ ‘https://ifelse.io/${props.username} }>{ 
props.username}</a>; 


上 


eonst UserCard = BLODS => 1 UserCard 是 UserProfile 和 
return ( UserProfileLink 的 父 组 件 
<div> 


<UserProfile username={props.username} /> 
<UserProfileLink username={props.username} /> 
</diy> 
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); 
] 


render (<UserCard username="erondu" />, document .getElementByld!("root")); 


3.4 单 向 数据 流 


如 果 之 前 使 用 框架 开发 过 Web 应 用 ， 可 能 已 经 熟悉 术语 双 回 数据 绑 定 〈two-way data 
binding )。 数 据 绑 定 是 建立 应 用 UI 与 其 他 数据 之 间 联 系 的 过 程 。 在 实践 中 , 这 常常 表现 为 连接 模 
型 这 样 的 应 用 数据 ( 如 用 户 ) 和 用 户 界 面 的 库 或 框 以 并 会 保持 两 者 同步 。 它 们 彼此 同步 因此 被 绑 
定 在 一 起 。React 中 一 个 更 有 帮助 的 思考 方法 是 将 其 作为 投影 : UI 是 投射 到 视图 中 的 数据 ， 当 数 
据 变 化 时 ， 视 图 随 之 变化 ， 如 图 3-3 所 示 。 





3-3 ”数据 绑 定 通 单 指 的 是 在 应 用 数据 与 视图 ( 该 数据 的 展示 ) 之 间 建 立 连接 的 过 程 。 
另 一 种 思考 方式 是 将 其 作为 数据 向 用 户 能 够 看 到 的 东西 ( 如 视图 ) 的 投射 


数据 流 是 另 一 种 思考 数据 绑 定 的 方法 : 数据 如 何 流 经 应 用 的 不 同 部 分 ?本 质 上 ， 人 们 会 问 : 
“什么 能 够 更 新 什么 ， 从 哪里 更 新 ， 以 及 如 何 更 新 ? ”如 果 想 用 好 工具 ， 那 么 理解 正在 使 用 的 工 
具 如 何 塑 造 、 维 护 和 移动 数据 是 无 比重 要 的 。 不 同 的 库 和 框架 会 采用 不 同 的 数据 流 方法 ( React 
对 如 何 处 理 数据 流 并 没有 不 同 的 想法 )。 

React 中 ， 数 据 流 是 单 向 的 。 这 意味 看 实体 间 的 流动 并 非 水 平 的 一 一 这 种 情况 下 彼此 可 以 相 
互 更 新 ， 而 是 建立 了 一 个 层次 结构 。 可 以 通过 组 件 传递 数据 ,但 如 果 不 传递 属性 ， 就 不 能 触及 和 
修改 其 他 组 件 的 状态 或 属性 ， 也 无 法 修改 父 组 件 中 的 数据 。 

但 可 以 通过 回调 困 数 将 数据 传 回 层次 结构 的 上 层 。 当 父 组 件 接收 到 来 和 目 子 组 件 的 回调 因数 
时 , 它 可 以 修改 其 数据 并 将 修改 的 数据 传递 给 子 组 件 。 即 便 是 对 于 有 回调 函数 的 情况 ,数据 总 体 
上 仍 是 向 下 流动 的 并 仍 由 向 下 传递 该 数据 的 父 组 件 决 定 。 这 就 是 为 什么 我 们 称 React 中 的 数据 流 
是 单 向 的 ， 如 图 3-4 所 示 。 

单 品 数据 流 在 构建 UI 时 特别 有 用 ， 因 为 它 让 思考 数据 在 应 用 中 流动 的 方式 变 得 更 简单 。 得 益 于 
组 件 的 层次 结构 以 及 将 属性 与 状态 局 限于 组 件 的 方式 ， 预 测 数 据 如 何在 应 用 中 移动 通常 更 容易 。 
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| ”> setState() 


属性 一 一 





setState() SE 


图 3-4 数据 在 React 中 是 按 一 个 方向 流动 的 。 属 性 由 父 组 件 传递 给 子 组 件 ( 从 所 有 者 到 拥有 者 )， 


并 且 子 组 件 不 能 编辑 父 组 件 的 状态 或 属性 。 每 个 拥有 支撑 实例 的 组 件 都 能 修改 它 自己 的 
状态 但 无 法 修改 超出 其 自身 的 东西 ， 除 了 设置 其 子 组 件 的 属性 


某 种 程度 上 避免 这 个 层次 结构 听 上 去 似乎 不 错 ， 而 且 可 以 从 应 用 的 任何 部 分 随意 修改 想 要 
修改 的 东西 ,但 实际 上 这 往往 会 导致 难以 琢磨 的 应 用 并 且 可 能 造成 困难 的 调试 情况 。 后 续 章节 
将 探索 Flux 和 Redux 这 样 的 架构 模式 ， 它 允许 维护 单 向 数据 流 范 式 的 同时 协调 跨 组 件 或 跨 应 
用 的 行动 。 


小 结 


本 章 讨 论 了 如 下 主题 。 


状态 是 程序 在 特定 瞬间 可 访问 的 信息 。 

不 可 变 状态 不 会 改变 ， 而 可 变 状态 会 改变 。 

持久 的 、 不 可 变 的 数据 结构 不 会 改变 一 一 它们 只 记录 其 改变 并 创建 自己 的 副本 。 
临时 的 、 可 变 的 数据 结构 会 在 更 新 时 被 清除 。 

React 即使 用 可 变数 据 ( 组 件 本 地 状态 )， 也 使 用 伪 不 可 变数 据 (属性 )。 
属性 是 伪 不 可 变 的 并 且 一 旦 设置 就 不 应 该 被 修改 。 

组 件 状 态 由 文 撑 实例 追踪 并 且 可 以 使 用 setState 进行 修改 。 

setState 执行 数据 的 浅 合 并 、 更 新 组 件 状态 ,保留 任何 没有 被 覆盖 的 项 级 属性 。 
React 中 的 数据 流 是 单 癌 的 , 从 父 组 件 流 问 子 组 件 。 子 组 件 通 过 回调 函数 将 数据 回 送 给 父 
组 件 ， 但 它们 不 能 直接 修改 父 组 件 的 状态 ， 而 且 父 组 件 也 无 法 直接 修改 子 组件 的 状态 。 
组 件 通 过 属性 完成 组 件 交 互 。 





第 4 草 建 立 在 对 React 状态 知识 的 了 解 之 上 ， 我 们 将 探索 如 何 使 用 生命 周期 方法 挂 载 进 React 
的 浑 染 和 更 新 过 程 。 我 们 也 会 开始 探索 React 中 的 变更 检测 并 使 用 新 学 习 的 React 技能 开始 构建 
Letters Social 应 用 。 


而 





于 4 至” React 中 的 演 染 和 生命 周期 万 法 


本 章 主要 内 容 

图 ”搭建 应 用 仓库 

注 染 过 各 
生命 周期 方法 . 
更 新 React 组 件 

使 用 React 创建 信息 流 


在 本 章 中 ,我 们 将 运用 目前 涉及 的 一 些 概念 和 技能 来 创建 首 个 React 应 用 。 在 前 几 半 中， 我 
们 探讨 了 处 理 React 中 的 数据 以 及 处 理 可 变 ( 能够 变化 的 ) 数据 和 不 可 变 的 (不 能 变化 的 ) 数据 
的 不 同方 法 。 但 要 构建 更 健壮 的 组 件 ， 就 需要 利用 全 部 组 件 API, 深入 生命 周期 方法 ， 并 了 解 
React 的 泻 染 过 程 。 

我 们 将 会 看 看 泻 染 一 一 React 把 数据 转换 成 用 户 界面 的 过 程 ， 以 及 被 称 为 生命 周期 方法 的 一 
些 在 组 件 生命 周期 中 与 组 件 进行 交互 的 方式 。 这 些 内 容 将 会 与 你 已 经 了 解 的 读 取 和 修改 React 中 
的 数据 ( 属性 和 状态 )、 更 新 组 件 状 态 及 传递 数据 给 不 同 组 件 结合 起 来 。 
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我 们 将 在 本 章 开始 构建 Letters Social 应 用 。 我 们 假装 自己 是 一 家 专注 于 创建 下 一 个 伟大 社区 
网 络 应 用 的 初创 公司 。 我 们 的 公司 Letters ( 公司 巧妙 地 命名 是 为 了 与 Alphabet 这 样 的 Web 巨头 
区 分 开 来 ) 致力 于 社交 。 读 者 将 跟随 本 书 使 用 React 来 构建 这 个 应 用 。 到 本 书 结束 时 ，Letters Social 
将 用 到 服务 器 端 泻 染 、Redux 以 及 React。 如 图 4-1 所 示 ， 这 个 应 用 支持 的 一 些 功 能 需要 在 这 里 
提 一 下 ， 以 便 读 者 了 解 跟随 本 书 所 要 构建 的 内 容 : 

图 ”创建 带 有 文本 的 帖子 ; 

图 使 用 Mapbox 给 帖子 添加 位 置信 息 ; 

国 给 帖子 点 赞 和 评论 ; 


第 4 章 React 中 的 泻 染 和 生命 周期 方法 


Mark Thomas 
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图 4-1 Letters Social， 这 是 本 书 构建 的 React 应 用 。 可 以 在 本 书 的 GitHub 上 查看 
这 一 应 用 的 源 代码 并 在 https://social.react.sh 上 尝试 这 一 应 用 
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图 通过 GitHub 和 Firebase 提供 OAuth 身份 验证 ; 

图 在 信息 流 中 展示 帖子 ; 

国 使 用 基本 的 分 页 。 

我 们 会 在 本 章 以 及 后 续 几 章 逐 一 实现 这 些 功 能 。 为 了 让 事情 更 容易 些 ， 我 为 第 4 章 到 第 12 
章 创建 了 Git 分 支 。 每 章 ( 某 些 情况 下 是 每 两 章 ) 的 分 支 是 到 该 章 结束 的 代码 。 例 如 ， 如 果 检 出 
第 5 章 和 第 6 章 的 Git 分 文 ， 就 拥有 到 这 两 章 结束 的 代码 。 这 样 读 者 就 可 以 根据 自己 的 喜好 提前 
学 习 ， 而 且 可 以 从 任意 一 章 开 始 。 例 如 ， 如 果 想 要 学 习 第 9 章 ( 介绍 React 应 用 程序 的 测试 )， 
可 以 检 出 第 7 章 和 第 8 章 的 代码 并 从 那里 开始 学 习 。 我 尽力 让 代码 检 出 更 容易 些 , 读者 可 以 根据 
自己 的 喜好 使 用 Git 仓库 和 分 支 。 请 随意 发 起 问题 的 pull request 或 者 fork 它 作 为 给 应 用 增加 新 功 
能 的 起 点 。 

读者 也 可 以 在 http://docs.react.sh 上 阅读 有 关 这 些 源 代码 文件 的 基本 文档 , 它 不 是 很 详尽 , 但 
如 果 想 感受 一 下 代码 并 且 嘉 欢 JSDoc 风格 的 文档 ,这 些 文档 是 不 错 的 选择 。 仓 库 的 README 也 
列 出 了 一 些 有 用 的 资源 。 如 果 有 问题 (或 者 只 是 因为 喜欢 这 本 书 ) 可 随时 直接 联系 我 。 可 以 通过 
README 来 提问 题 。 _ 


4.1.1 获取 源 代码 


去 本 书 的 GitHub 上 获取 源 代码 。 这 是 一 个 仓库 ,存储 了 与 本 书 相 关 的 所 有 源 代 码 。 在 本 书 
的 GitHub 组 织 中 还 有 其 他 几 个 仓库 ， 也 可 以 随意 检 出 ， 主 要 的 源 代 码 都 在 那里 。 去 那里 看 看 ， 
可 以 从 那里 下 载 源 代码 ， 也 可 以 使 用 下 面 的 命令 来 殉 隆 仓库 : 


git clone git@github.com:react-in-action/letters-social .git 


git checkout chapter-4 


这 会 在 当前 目录 克隆 该 代码 仓库 并 切换 到 起 始 分 文 〈 这 个 项 目的 起 始 分 文 )。 接 下 来 的 步骤 
是 安装 依赖 。 为 了 一 致 性 , 在 这 本 书 里 我 们 使 用 npm， 但 如 果 你 更 喜欢 使 用 yarn ( 另 一 个 包装 了 
npm 的 依赖 管理 库 )， 也 可 以 使 用 yarn， 但 要 确保 使 用 yarn 安装 而 非 npm。 

应 用 程序 源 代 码 的 package.json 中 包含 了 本 书 需 要 的 所 有 模块 。 要 安装 它们 ， 可 以 在 源 代码 
目录 运行 下 面 的 命令 : 

npm install 


这 将 安装 需要 的 所 有 依赖 。 如 果 更 改 了 Node 的 版 本 (通过 nvm 或 其 他 方式 )， 需要 重新 安 
装 Node 模块 ， 因 为 不 同 版 本 的 Node 将 以 不 同 的 方式 编译 不 同 的 模块 ( 如 node-sass )。 
4.1.2 ”应 该 使 用 哪个 版 本 的 Node 


现在 是 讨论 使 用 哪个 Node 版 本 的 好 时 机 。 我 建议 使 用 Node 最 新 的 稳定 版 本 。 在 撰写 本 书 
时 ，Node 的 发 布线 是 8.X。 我 们 不 支持 Node 6.X 之 前 的 版 本 ， 支 持 8.X 或 比 8.X 更 高 的 版 本 更 
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为 合理 , 因为 这 不 是 一 个 业务 或 生产 环境 一 一 在 业务 或 生产 环境 中 未 经 大 量 测试 就 不 能 轻易 切换 
版 本 。Node 8.X 还 使 用 了 新 版 本 的 npm 并 且 撒 层 V8 引 敬 的 速度 得 到 了 较 大 的 提升 。 

如 果 计 算 机 上 没有 这 些 版 本 的 Node， 可 以 直接 去 Node.js 官方 网 站 下 载 Node 的 最 新 稳定 版 ， 
也 可 以 使 用 nvm 命令 行 工 具 在 本 地 安装 Node 的 丰 干 个 版 本 并 在 它们 之 间 进 行 切换 。 

不 同 版 本 的 Node 支持 不 同 的 JavaScript 特性 ， 所 以 了 解 使 用 的 版 本 文 持 什么 是 很 重要 的 。 
如 果 想 更 多 了 解 手头 版 本 支持 哪些 特性 以 及 其 他 版 本 文 持 (或 即将 文 持 ) 哪些 特性 ,可 以 了 解 一 
下 相关 特性 在 各 个 版 本 上 的 实现 情况 。 


4.1.3 关于 工具 和 CSS 的 注意 事项 


正如 本 书 其 他 部 分 提 及 的 那样 ,围绕 JavaScript 应 用 程序 的 工具 是 一 个 复杂 而 快速 变化 的 领域 。 
这 也 是 一 个 值得 深入 的 领域 。 出 于 这 些 原因 ， 我 们 不 会 介绍 如 何 设置 Webpack、Babel 或 其 他 工 
具 。 这 个 应 用 程序 的 源 代 码 已 具有 开发 和 构建 的 过 程 ， 你 可 以 自由 地 探索 我 已 设置 好 的 配置 , 但 
这 些 内 容 已 超出 本 书 的 范围 ， 因 此 我 不 会 介绍 它们 。 

另外 值得 一 提 的 是 CSS。 我 已 经 介绍 了 React 中 使 用 内 联 样式 的 方式 , 但 CSS 不 在 本 书 的 讨 
论 范围 内 。 出 于 这 个 原因 ， 我 创建 了 本 书 所 需 的 全 部 样式 。 任 何 UI 标记 都 有 为 其 创建 的 样式 。 
某 些 样式 依赖 于 某 些 类 型 或 层级 结构 ， 因 此 ， 如 果 移 动 不 同 的 元 素 或 更 改 CSS 的 类 名 称 ， 可 以 
预料 应 用 外 观 崩 坏 。 我 的 目的 是 让 读者 在 学 习 React 时 少 考虑 一 些 事情 ,但 是 如 果 你 有 兴趣 摆弄 
应 用 程序 的 样式 ， 但 做 无 妨 。 


4.1.4 ”部 团 


运行 在 https://social.react.sh 的 应 用 被 部 署 到 ZEIT 上 ， 但 如 果 未 来 由 于 某 些 原因 环境 需要 改变 ， 
我 会 让 应 用 运行 在 当时 最 有 意义 的 云 服 务 解决 方案 上 。 你 无 须 关 心 应 用 的 托管 。 如 果 你 在 本 书 结束 
时 发 现 自己 想 要 fork 代码 并 为 了 学 习 和 乐趣 而 给 应 用 添加 功能 ， 就 需要 确定 最 佳 应 用 部 署 方式 。 幸 
好 ， 构 建 和 运行 过 程 简单 直接 ， 部 署 到 别 的 地 方 应 该 比较 容易 。 


4.1.5 API 服务 久 和 数据 库 


为 了 避免 运行 像 MongoDB 或 PostgreSQL 这 样 的 数据 库 , 我 们 将 通过 JSON-server 库 来 
使 用 模拟 的 REST API。 我 已 经 对 默认 服务 右 做 了 一 些 修改 ( 可 以 在 代码 库 的 db 文件 夹 中 看 到 
这 些 修改 )， 这 有 助 于 使 项 目 更 容易 一 些 。 我 们 将 得 到 一 个 读 取 和 修改 JSON 文件 的 轻 量 级 数 
据 库 ， 而 无 须 处 理 数据 库 。 可 以 运行 下 面 这 个 命令 来 创建 示例 数据 或 者 重 置 应 用 程序 数据 : 


npm run db:seed 


这 将 覆盖 现 有 的 JSON 数据 库 并 用 新 的 样 例 数据 蔡 换 它 〈 有 用户、 帖子 和 评论 都 是 以 《星球 大 
战 》 为 主题 的 一 一 愿 原 力 与 你 同 在 )。 后 续 几 章 中 ， 登 录 后 可 以 在 数据 库 中 创建 一 个 用 户 。 如 果 
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重新 运行 数据 库 seed 命令 ， 该 用 户 会 被 覆盖 ， 必 须 登 出 并 重新 登录 才能 得 以 恢复 。 这 是 不 应 该 
发 生 的 ， 而 且 可 能 不 需要 多 次 运行 数据 库 命 令 ， 但 以 防 万 一 应 该 意识 到 重 置 数据 意味 着 什么 。 

我 已 经 提供 了 一 些 辅助 男 数 以 便 更 容易 地 请 求 API。 在 src/shared/http.js 中 可 以 看 到 这 些 限 
数 。 我 正在 使 用 isomorphic-fetch 库 ， 因 为 它 完全 仿照 了 浏览 器 中 可 用 的 标准 Fetch APIL， 
而 且 可 以 在 服务 器 端 运行 。 我 假设 读者 有 一 些 使 用 浏览 器 中 HTTP 库 的 经 验 ， 但 如 果 没 有 的 话 ， 
可 以 将 包含 辅助 浮 数 的 文件 作为 开始 学 习 Fetch API 的 方式 。 


4.1.6 ”运行 应 用 程序 
以 开发 模式 运行 应 用 程序 的 最 简单 的 方法 是 运行 : 
npm run dev 
还 可 以 使 用 其 他 命令 ， 但 最 主要 的 命令 是 dev。 要 查看 其 他 可 用 命令 ， 可 以 运行 : 
npm run 
这 会 列 出 该 仓库 的 所 有 可 用 命令 。 随 便 试 试 这 些 命令 以 便 了 解 它 们 是 如 何 满足 项 目 需要 的 。 我 们 
重点 关注 的 两 个 主要 命令 是 npm run dev 和 npm run db:seed。 
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如 果 克 隆 了 项 目 并 安装 了 依赖 ， 就 应 该 拥有 了 所 需 的 一 切 。 在 开始 构建 Letters Social 之 前 ， 
我 们 需要 了 解 一 下 演 染 和 生命 周期 方法 。 这 些 是 React 的 关键 特性 ， 一 旦 了 解 了 它们 ， 就 为 开始 
建立 Letters Social 应 用 程序 做 了 更 充分 的 准备 。 


4.2.1 ”生命 周期 方法 概 虹 


在 第 2 章 中 , 已 经 了解 了 在 组 件 中 创建 和 分 配 清 数 作 为 事件 ( 点击、 表单 提交 等 ) 的 处 理 程 
序 。 这 非常 有 用 ， 因 为 使 用 者 可 以 创建 啊 应 用 户 事件 的 动态 组 件 ( 任何 现代 Web 应 用 程序 的 关 
键 特性 )。 但 如 果 使 用 者 想 要 更 多 东西 呢 ? 仅 有 这 个 特性 ， 看 起 来 我 们 仍然 在 使 用 常规 的 旧式 
HTML 和 JavaScript。 例 如 ， 想 从 API 获得 用 户 数据 或 者 读 取 cookie 供 以 后 使 用 ， 所 有 这 些 都 无 
须 等 待 用 户 发 起 事件 。 这 些 是 Web 应 用 程序 中 需要 处 理 的 例 行 工作 一 一 某 些 情况 下 会 布 望 它 目 
动 执 行 ， 那 么 这 些 事情 会 在 哪里 发 生 呢 ? 答案 是 生命 周期 方法 。 


定义 生命 周期 方法 是 附属 于 React 类 组 件 的 特殊 方法 , 其 在 组 件 生命 周期 的 特定 时 间 点 被 执行 。 生命 
周期 是 一 种 思考 组 件 的 方式 。 拥 有 生命 周期 的 组 件 隐喻 着 其 有 “生命 ”一 它 至 少 有 起 始 、 中 间 和 结束 。 
这 种 思维 模型 让 思考 组 件 更 简单 并 就 组 件 在 其 生命 周期 所 处 位 置 提供 了 上 下 文 。 生 命 周期 方法 不 是 
React 独 有 的 ， 许 多 UI 技术 由 于 生命 周期 方法 的 直观 和 有 用 而 采用 它们 。React 组 件 生命 的 主要 部 分 古 
挂 载 、 更 新 和 印 载 。 图 4-2 展示 了 组 件 生命 周期 的 概览 及 泻 染 过 程 (React 如 何 随时 间 管 理 组 件 ). 
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其 他 JavaScript 
(其 他 模块 、 自 定义 方法 ) 
组 件 
<Component 
display 
userlD={12}> 
<OtherComponent/> 
属性 <Component> 





{"user": {Name: "Mark"}} 











内 部 组 件 状态 生命 周期 方法 


应 用 程序 
应 用 程序 代码 〈 组 件 、 样 式 、 实 用 工具 、 业 务 逻 辑 ) 


React DOM / React- 
Native / React VR 


目标 环境 /平台 

:桌面 端 和 移动 端 一 一 原生 设备 -| 
是 (10S、Android) | 
\ 服务 器 VR 设 备 
(Node.]s) (React VR) ' 


图 4-2 ”React 概览 。React 会 泻 染 ( 创建 、 管 理 ) 组 件 并 使 用 组 件 创建 用 户 界面 


前 几 间 中 提 到 过 生命 周期 方法 ,现在 是 时 候 真 正 深入 ， 了 解 它们 是 什么 以 及 如 何 使 用 它们 。 
了 再 次 从 较 高 层次 思考 一 下 React。 看 看 图 4-2 的 顶部 来 唤起 记忆 。 我 们 已 经 讨论 过 React 
的 状态 、 通 过 React.createElement 和 JSX 创建 React 组 件 , 但 我 们 仍 需要 深入 了 解 生 命 周 期 方法 。 

让 我 们 慢 慢 回忆 以 前 的 几 章 并 回顾 一 些 概念 。 什 么 是 泻 染 ?” 泻 染 的 一 个 定义 是 “使 成 为 或 变 
为 ; 创建 。” 就 我 们 的 目的 而 言 ， 我 们 可 以 将 泻 染 看 作 React 创建 和 管理 用 户 界面 所 做 的 工作 ， 
束 是 让 应 用 程序 展现 到 屏幕 上 的 工作 。 正 是 React 获取 组 件 并 把 它们 变 成 用 户 界面 。 

我 们 可 以 使 用 本 章 所 学 的 生命 周期 方法 来 挂 载 到 这 个 过 程 。 这 些 方法 使 我 们 能 够 灵活 地 在 组 件 
生命 周期 的 适当 时 刻 做 我 们 所 需 的 工作 。 但 这 些 方法 仅 适用 于 那些 通过 继承 React .Component 抽 
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象 基 类 的 类 所 创建 的 组 件 。 

第 3 章 未 尾 所 讨论 的 无 状态 函数 组 件 没有 可 用 的 生命 周期 方法 。 由 于 没有 支撑 实例 , 也 不 能 
它们 内 部 使 用 this .setState。React 没有 追踪 它们 的 任何 内 部 状态 ， 它 们 仍然 可 以 由 父 组 
件 通 过 属性 更 新 它们 的 数据 , 但 无 法 访问 生命 周期 方法 。 这 可 能 看 起 来 像 是 一 个 障碍 ,或 者 像 是 
它们 不 那么 强大 ， 但 很 多 情况 下 它们 就 是 所 需要 的 。 


4.2.2 生命 周期 方法 的 类 型 


本 节 会 了 解 React 在 不 同 组 中 提供 的 不 同 生命 周期 方法 并 讨论 每 个 方法 做 什么 。 可 以 将 生命 
周期 方法 分 成 两 个 主要 的 组 : 

加 “将 执行 ”( Will ) 方法 一 一 在 一 些 事情 发 生前 被 调用 ; 

国 “已 完成 ”(Did ) 方法 一 一 在 一 些 事情 发 生 后 被 调用 。 

也 有 其 他 一 些 方法 不 属于 这 两 类 , 它们 与 初始 化 和 错误 处 理 相 关 ,， 还 有 一 个 与 更 新 相关 。 然 
而 ， 大 部 分 方法 是 “将 执行 ”类 型 和 “已 完成 ”类 型 。 

我 们 可 以 根据 它们 与 生命 周期 的 哪 部 分 相关 而 进一步 将 它们 分 成 几 个 类 型 ( 见 图 4-3 )。 组 件 
的 生命 周期 有 4 个 主要 部 分 且 每 部 分 有 相应 的 生命 周期 方法 : 

图 初始 化 一 一 组 件 类 被 实例 化 的 时 候 ; 

国 ” 挂 载 中 一 一 组 件 被 插入 DOM 的 时 候 ; 

图 更 新 中 一 一 通过 状态 或 属性 用 新 数据 更 新 组 件 的 时 候 ; 

加 ” 纯 载 中 一 一 组 件 从 DOM 中 移 除 的 时 候 。 


挂 载 中 已 挂 载 印 载 中 
vDOM DOM DOM 






React 类 组 件 
或 者 无 状态 
图 数组 件 





React 由 组 件 创 建 React 将 组 件 插 入 React 检 测 到 状态 变 


一 个 虚拟 DOM 树 实际 DOM 中 化 并 更 新 实际 DOM 
(内 存 中 ) 来 与 YDOM 同 步 


图 4-3 ” 泻 染 过 程 和 组 件 生命 周期 的 概览 。 这 就 是 React 用 来 管理 组 件 的 过 程 。 组 件 生命 的 三 个 
主要 部 分 是 当 组 件 挂 载 中 、 已 挂 载 及 卸载 中 的 时 候 。 当 组 件 被 插入 DOM 时 ， 其 处 于 挂 载 中 ， 
一 旦 插入 则 组 件 处 于 已 挂 载 ， 而 当 组 件 被 移 除 时 ， 组 件 处 于 印 载 中 


在 组 件 初始 化 过 程 中 以 及 组 件 挂 载 、 更 新 和 印 载 的 前 后 都 会 调用 生命 周期 方法 。 这 些 方 法 并 
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没有 那么 多 ,特别 是 与 其 他 库 或 框架 相 比 ,但 学 习 React 的 时 候 却 很 容易 将 它们 搞 混 。 将 它们 组 
成 有 意义 的 认识 上 的 分 组 ， 将 有 助 于 掌控 泻 染 过 程 的 不 同 部 分 。 图 4-4 展示 了 React 中 泻 染 过 程 
的 概览 ， 我 们 将 在 本 章 更 细致 地 了 解 它 。 


卸载 中 
ee “ 活 ” 挂 载 中 
在 实际 DOM 中 ， 并 可 以 由 React 
， 司 } 挂 载 和 钊 载 由 ReactDOM 从 外 部 摊 
能 印 载 自己 ) ， 但 组 件 可 以 通过 
shouldComponentUpdate 来 控制 组 


已 卸载 ， 组 件 仅 存在 于 Ee 
虚拟 DOM 件 的 更 新 是 否 应 该 发 生 









ReactDOM .render() 





虚拟 DOM 





在 构造 函数 中 设置 属性 和 初始 状态 


ReactDOM .hydrate() 










(用 于 服务 器 端 泻 染 ) 
A 
(不 会 触发 重新 泻 染 ) 


componentVVillUnmount() 


A 可 以 使 用 setState() 


componentDidMount() 


更 新 中 -一 已 持 载 一 旦 挂 载 ， 就 
当 组件 已 挂 载 时 ， 它 “ 活 ” 在 实际 可 以 更 新 
DOM 中 ， 并 可 以 由 React 更 新 以 使 


其 与 数据 保持 同步 


A 可 以 使 用 setState() | componentWillReceiveProps(nextProps) 
shouldComponentUpdate(nextProps, nextState) 
true setState() 


componentWillUpdate(nextProps, nextState) 


componentDidUpdate(prevProps, prevState) 











构造 商 数 、 渲 染 和 生命 周 
期 方法 中 未 捕获 的 错误 


A 可 以 使 用 setState() componentDidCatch(error, errorlnfo) 





图 4-4 React 组 件 生命 周期 的 概览 。ReactDOM 演 染 组 件 ， 而 当 React 管理 组 件 时 会 调用 某 些 生 命 周期 方法 
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记 住 ， 从 生命 周期 的 角度 考虑 ， 用 户 界面 和 组 件 并 非 React 或 JavaScript 技术 特有 的 ， 其 他 技 
术 已 经 采用 了 这 个 想法 并 取得 了 巨大 的 成 功 ， 有 时 甚至 是 在 受到 React 的 启发 后 。 但 这 些 特定 的 生 
命 周期 方法 是 React 独 有 的 。 为 了 探索 这 些 方法 ,我 们 将 创建 两 个 简单 组 件 (一 个 父 组 件 和 一 个 子 
组 件 ) 它 们 将 实现 我 们 要 了 人 解 的 所 有 生命 周期 方法 ,你 可 以 前 往 https://codesandbox.io/s/2vxn9251xy 
了 解 如 何 添加 这 些 组 件 , 仍 然 可 以 从 CodeSandbox 下 载 代码 并 使 用 浏览 器 的 开发 者 工具 来 查看 控 
制 台 。 代 码 清单 4-1 展示 了 这 些 组 件 的 基本 设置 。 


代码 清单 4-1 探索 生命 周期 方法 





import PropTypes from ‘prop-types'; 
import React, { Component } from 'react'; 
import { render } from 'react-dom'; 


__ | 声明 子 组 件 
| 将 propTypes 设置 为 类 的 静态 属性 


class ChildComponent extends Component { 
static propTypes = { 
name: PropTypes.string 


}; 


static defaultProps = (function () 1{ 
console.log('ChildComponent : defaultProps'); 设置 默认 属性 ， 通常 会 将 其 
return {}; 设置 为 对 象 而 非 函 数 , 但 这 
ED 里 使 用 立即 执行 函数 来 注 


constructor (props) { 
super (props); 
console.log('ChildComponent: State ' ) ; 


人 console.log 语句 


} 
render() { 
console.log('ChildComponent: render'); 
return ( 
<div> 
Name: {this.props.namel} 
</div> 
); 
} 
}; 


A 六 2 
class ParentComponent extends Component { -| 创建 父 组 件 
Constructor(} 1 


super (props); 在 构造 阴 数 中 绑 定 
this state = { onInputChange 方法 
name: '! 以 便 可 以 在 render 
} 中 引用 该 方法 并 且 
this.onInputChange = this.onInpPutChange.bindad(thls) ， 让 它 指向 类 实例 而 
} 、 
onInputChange(e) { 非 定义 
this.setState({ text: e.target.value }); 用 表单 输入 数据 
} 大 
render() { 更 新 状态 
console.log('ParentComponent: render'); 
return [ 


<h2 key="h2">Learn about rendering and lifecycle methods!</h2>, 
<input key="input" value={this.state.text} 
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onChange={this.onInputChange} />， 
<ChildComponent key="ChildComponent" name={this.state.text} /> 
I 党 染 


) 在 父 组 件 中 : 
Ls 子 组 件 
render ( 

<ParentComponent />, 用 React DOM 

document .getElementById('container') a 
i 泻 染 父 组 件 


无 须 让 组 件 做 太 多 工作 就 可 以 探索 生命 周期 方法 的 工作 机 制 。 这 里 设置 了 父 组 件 和 子 组 件 。 
父 组 件 监 听 输 入 框 的 变化 并 通过 状态 为 子 组 件 提 供 新 属性 。 


4.2.3 初始 方法 和 “将 执行 ”方法 


要 探索 的 第 一 组 生命 周期 相关 的 属性 是 组 件 的 初始 属性 。 这 包括 两 个 已 知 属性 : defaultProps 
和 state( 初 始 )。 这些 属性 帮助 给 组 件 提供 初始 数据 。 让 我 们 在 继续 之 前 先 快速 重 温 一 下 以 下 内 容 。 
国 defaultProps 个 为 组 件 提供 默认 属性 的 静态 属性 。 如 果 父 组 件 没有 设置 该 属性 ， 那 
么 在 任何 组 件 被 挂 载 前 可 以 访问 this .props 上 的 设置 ， 但 不 能 依赖 this.props 或 
this.state， 因 为 defaultProps 是 一 个 静态 属性 ， 它 是 通过 类 而 非 实例 访问 的 。 
加 state (初始 ) 构造 痪 数 中 这 个 属性 的 值 会 成 为 组 件 的 状态 的 初始 值 集合 。 当 需要 
提供 内 容 占 位 、 设 置 默 认 值 或 类 似 的 东西 时 ， 这 会 特别 有 用 。 它 类 似 于 默认 属性 ， 只 不 
过 数据 预期 是 可 变 的 并 且 只 有 在 继承 React .Component 的 组 件 里 才 有 。 
尽管 设置 初始 状态 和 属性 并 不 使 用 re 
React 组 件 类 的 特定 方法 (它们 使 用 Ns 
JavaScript 构造 也 数 ), 但 它们 仍然 是 组 件 
生命 周期 的 一 部 分 。 很 容易 不 小 心 忽略 
它们 ， 但 它们 在 为 组 件 提供 数据 方面 确 
实 发 挥 了 重要 作用 。 
为 了 说 明 泻 染 的 顺序 以 及 即将 了 解 
的 各 个 生命 周期 方法 ， 我 们 将 创建 两 个 Wi 
可 以 在 其 上 指定 生命 周期 方法 的 简单 组 i 
件 。 我 们 将 创建 一 个 父 组 件 和 一 个 子 组 。 | ww- 
件 ， 以 便 不 仅 可 以 看 到 不 同方 法 的 调用 
顺序 ， 而 且 可 以 看 到 该 调用 顺序 在 父 组 
件 和 子 组 件 之 间 是 如 何 运 作 的 。 简 单 起 4-5 ”示例 组 件 一 经 展现 控制 台所 输出 的 内 容 。 生 命 周 期 
见 ， 只 需 将 信息 输出 到 开发 者 控制 台 。 方法 在 每 个 步骤 都 会 触发 记录 到 控制 台 的 消息 ， 以 及 这 些 
图 4-5 展示 了 调用 完成 之 后 在 开发 者 控 ”方法 可 用 的 任何 参数 。 可 以 在 https://codesandbox.io/s/ 
制 台 能 够 看 到 的 内 容 。 2vxn9251xy 查看 实际 运行 的 生命 周期 方法 
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4.2.4 挂 载 组 件 


创建 完 父 组 件 和 子 组 件 之 后 ， 让 我 们 看 看 挂 载 。 挂 载 是 React 将 组 件 插 和 人 DOM 的 过 程 。 记 
住 ， 直到 React 在 实际 DOM 中 创建 组 件 为 止 , 组 件 只 存在 于 虚拟 DOM 中 。 查 看 图 4-6， 大 致 了 
解 父 组 件 和 子 组 件 的 挂 载 和 泻 染 过 程 。 按照 定义 ,， 挂 载 方法 “挂钩 ”到 组 件 生命 周 期 的 开始 和 结 
束 并 且 只 能 被 触发 一 次 ,组 件 只 有 一 个 开始 和 结束 。 








六 
vDOM DoM JC 
de 
于 ; 
证 ; 
; defaultProps 
af | sb 
DA ! defaultProps 
二 Sd state 
父 组 件 先 调用 com ponentWil IMount， 往 
但 需要 等 待 子 组 进行 挂 载 圳 componentWillMount() 
render() 
componentWillMount() 
render() 
componentDidMount() 
父 组 件 直到 其 子 组 件 完成 挂 载 后 祝 render() 一 旦 组 件 被 挂 载 ， 它 就 存 
才 完 成 挂 载 ， 所 以 子 组 件 先 调用 贡 在 于 DOM 中 并 且 会 被 分 配 
componentDidMount 门 ] 一 个 DOM 实 例 
componentDidMount() 
render() 
控 = OnChanee 囊 件 被 融 发 一 
注意 ， i 人 机 | 
们 学 习 React 时 常 犯 的 一 个 错误 是 门 | pz” 父 组 件 状 态 改 变 组 件 通 过 props 向 子 组 
中 nd 0 生计 。 四 et 
到 了 Pe 开发 者 无 法 准确 妃 : 新 届 性 React 更 新 实际 DOM 以 使 
i i S componentWillReceiveProps() 实际 DOM 与 虚拟 DOM 保 
因为 它 会 出 于 性 能 原因 进行 批量 。 “一 z 持 一 到 
更 新 及 shouldComponentUpdate() 
北 componentWillUpdate() 
上 叭 : render() 
vy componentDidUpdate() 


图 4-6 ”应 用 于 示例 父 组 件 和 子 组 件 的 泻 染 过 程 


定义 ” 挂 载 是 React 将 组 件 插入 实际 DOM 的 过 程 。 一 旦 完成 ， 组 件 就 “准备 ”好 了 ， 这 通常 是 执 
行 HTTP 调用 或 读 取 cookie 之 类 事情 的 好 时 机 。 此 时 ， 也 能 够 通过 ref 访问 DOM 元 素 ， 这 部 分 内 
容 将 在 后 续 章节 中 讨论 。 


如 果 回 头 看 一 下 图 4-3， 你 将 会 注意 到 ， 在 组 件 挂 载 前 只 有 一 个 机 会 改变 状态 。 可 以 使 用 
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component WillMount 来 做 这 件 事 ， 这 将 在 组 件 挂 载 前 提供 机 会 设置 状态 或 执行 其 他 操作 。 这 
个 方法 中 的 任何 状态 改变 都 不 会 触发 重新 泻 染 ， 不 像 其 他 状态 更 新 那样 会 触发 之 前 看 到 的 更 新 过 
程 。 了 解 哪些 方法 会 触发 重新 泻 染 以 及 哪些 不 会 触发 至 关 重 要 , 这 有 助 于 理解 应 用 程序 的 行为 以 及 
在 应 用 出 错时 进行 调试 。 图 4-7 展示 了 我 们 一 直 在 研究 的 概要 的 生命 周期 上 下 文中 的 挂 载 方法 。 
挂 载 中 
挂 载 和 卸载 由 ReactDOM 从 外 部 控制 (没有 
ReactDOM 的 帮助 组 件 不 能 印 载 自己 ) ， 但 


组 件 可 以 通过 shouldComponentUpdate 来 控 
制 组 件 的 更 新 是 否 应 该 发 生 













ReactDOM .render( ) 
虚拟 DOM 在 构造 函数 中 设置 的 属性 和 初始 状态 
ReactDOM .hydrate() 
(用 于 服务 器 端 泻 染 ) 
(不 会 触发 重新 演 染 ) 
期 方法 中 未 捕获 的 错误 A 可 以 使 用 setState() componentDidMount() 


A 
已 挂 载 一 旦 挂 载 ， 就 可 以 更 新 
componentDidCatch(error, errorlnfo) 


图 4-7 在 更 大 的 生命 周期 过 程 上 下 文中 挂 载 方法 。 随 着 组 件 被 添加 到 DOM， 
几 个 特定 的 方法 随 这 个 过 程 被 调用 


下 一 个 要 介绍 的 方法 是 componentDidqMount。 当 React 调用 这 个 方法 时 ， 就 有 机 会 使 用 
componentDidMount 以 及 访问 组 件 的 refs。 在 这 个 方法 中 ， 可 以 访问 组 件 的 状态 和 属性 以 及 
组 件 准 备 更 新 的 信息 。 这 意味 着 这 个 方法 是 进行 诸如 用 网 络 请 求 返回 的 数据 更 新 组 件 状 态 之 类 工 
作 的 好 地 方 ， 也 是 使 用 像 jQuery 和 其 他 依赖 DOM 的 第 三 方 库 的 好 地 方 。 

由 于 React 的 工作 机 制 ， 如 果 在 其 他 方法 里 ( 如 render () ) 执行 处 理 程序 或 者 其 他 函数 ， 
将 会 遇 到 无 法 预料 和 意 想 不 到 的 结果 。Render 方法 需要 是 纯 的 〈 对 于 给 定 的 输入 有 一 致 的 结果 ) 
而 且 通 常会 在 组 件 的 生命 周期 内 被 多 次 调用 。React 甚至 可 能 会 批量 一 起 更 新 ， 所 以 不 能 保证 演 
染 会 在 指定 时 间 发 生 。 

现在 已 经 了 解 了 一 些 与 挂 载 相关 的 方法 ,我 们 将 它们 添加 到 组 件 里 以 便于 能 够 了 解 组 件 的 生 
命 周 期 。 代 码 清单 4-2 展示 了 如 何 将 这 些 挂 载 方法 添加 到 组 件 中 。 


4.2 


挂 载 方法 


代码 清单 4-2 
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import PropTypes from ‘'prop-types'; 
import React, { Component } from 
import { render } from ‘react-dom'; 


et 了 


class ChildComponent extends Component 1 


static propTypes = 1 
name: PropTypes.string 
}; 
static defaultProps = 
console.log('ChildComponent 
|} 
COnNsStructor (BEOBDS) 1 
super (props),; 


console.log('ChildComponent: 


this.state 
name: 


{ 
'Mark'" 
}; 
} 
componentWillMount() { 
console.log('ChildComponent 
} 
componentDidMount () 1 
console.log('ChildComponent 
} 
render() 1 
if (this.state.oops) ({ 


(funetion () 


{ 
defaultProps" ) ; 


state:).. 


添加 componentDidMount 
和 componentWillMount 到 | 
子 组 件 


componentWillMount"),; 


componentDidMount"'); 


throw new Error('Something went wrong'); 


} 


console.log('ChildComponent: 


return [|[ 
<div key="name">Name: 


] ; 


renadeLr ' ) ，; 


{this.props.name}</div> 


class ParentComponent extends Component { 


static defaultProps = 


return 1 
true: false 
}; 

} 2 


Sonstructeor (props) 1 
super (props); 


console.log('ParentComponent: 


this.state = 
this.onInputChange = 


{ 让 二 EE 


} 
componentWillMount() { 


console.log('ParentComponent: 


} 


componentDidMount() { 


console.l1og('ParentComponent: 


(function.(,) 
console.log('ParentComponent: 


{ 
defaultProps"); 


state'); 


this.onInputChange.bind (this);} 


添加 componentDidMount 
和 componentWillMount 到 
父 组 件 


componentWillMount'"); 


componentDidMount"'); 
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} 
onInputChange (e) 1{ 
const text = e.target.value; 


this. geteatatert() = (tt Eexts kext FF)}, 
} 
render() { 
console.log('ParentComponent: render '); 
return [ 


<h2 key="h2">Learn about rendering and lifecycle methods!</h2>, 

<input key="input" value={this.state.text} 
onChange={this.onInputChange} />, 

<ChildComponent key="ChildComponent" name={this.state.text} /> 


]; 
} 


render (<ParentComponent />, document .getElementById!('root")); 





4.2.5 ”更 新 方法 


一 旦 组 件 被 挂 载 并 位 于 DOM 中 ， 就 要 更 新 它 。 在 第 3 草 我 们 已 经 学 会 使 用 this .setState () 将 
新 数据 浅 合并 到 组 件 状 态 中 , 但 当 触发 更 新 时 发 生 的 可 不 止 这 些 。 为 钩 挂 到 更 新 过 程 ，React 提供 了 几 个 
可 用 的 方法 : shouldComponentUpdate、componentWillUpdate 和 componentDidUpdate，。 
图 4-8 展示 了 之 前 所 见 的 整个 生命 周期 图 涉及 更 新 的 部 分 。 

与 至 此 所 看 到 的 其 他 方法 不 同 ， 使 用 者 可 以 选择 控制 是 否 应 该 进行 更 新 。 方法 与 挂 
载 相关 方法 的 另 一 个 不 同 之 处 是 它们 为 属性 和 状态 提供 了 参数 ， 可 以 用 这 些 来 确定 是 应 该 更 新 ， 
还 是 应 该 对 变化 做 出 反应 。 

如 果 由 于 某 种 原因 shouldComponentUpdate 返回 false， 那 么 render () 会 被 跳 过 直 
到 下 次 状态 发 生 改 变 。 这 意味 着 可 以 防止 组 件 进行 不 必要 的 更 新 。 因 为 组 件 不 会 更 新 ,所 以 接 下 
来 的 componentWillUpdate 和 componentDiqdUpdate 方法 也 不 会 被 调用 。 

如 果 不 另 行 指定 ，shouldCcomponentUpdate 将 总 是 返回 true。 但 如 果 谨 慎 地 始终 将 
状态 看 作 是 不 可 变 的 并 只 在 render () 中 读 取 属性 和 状态 , 那么 就 可 以 用 一 个 将 旧 属 性 和 状态 
与 其 蔡 换 值 进行 比较 的 实现 来 覆盖 shouldCcomponentUpdate。 这 可 能 有 利于 性 能 优化 ， 但 

应 该 只 作为 应 急 手 段 。React 已 经 采用 了 复杂 、 先 进 的 方法 来 确定 应 该 更 新 什么 以 及 应 该 什么 
时 候 更 新 ， \ 

如 果 最 终 使 用 了 shouldCcomponentUpdate, 则 应 该 是 在 那些 方法 由 于 某 种 原因 不 够 用 的 
情况 下 。 这 并 不 意味 着 应 该 永远 不 使 用 它 ， 只 是 在 刚 开 始 使 用 React 的 时 候 可 能 并 不 需要 使 用 它 。 
与 所 有 生命 周期 方法 一 样 ， 它 提供 出 来 但 只 在 必要 时 才能 使 用 。 代 码 清单 4-3 展示 了 React 更 新 
相关 的 生命 周期 方法 的 示例 。 
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更 新 中 
当 组 件 已 经 挂 载 时 ， 它 “ 活 ” 在 
实际 DOM 中 ， 并 可 以 由 React 更 新 
以 使 其 与 数据 保持 同步 


A 可 以 使 用 setState() | componentWillReceiveProps(nextProps) 


shouldComponentUpdate(nextProps, nextState) 








setState( ) 


构造 函数 、 演 染 和 生命 周 
期 方法 中 未 捕获 的 错误 


componentWillUpdate(nextProps, nextState) 


A 可 以 使 用 setState() | componentDidUpdate(prevProps, prevState) 





componentDidCatch(error errorlnfo) 


图 4-8 ”涉及 更 新 的 生命 周期 方法 。 当 更 新 组 件 时 ， 会 触发 多 个 钩子 ， 
确定 组 件 是 否 应 该 更 新 、 如 何 更 新 以 及 更 新 何 时 完成 


代码 清单 4-3 ”更 新 方法 





Fe 
class ChildComponent extends Component 向 子 组 件 添加 更 新 方法 以 便 
Rs | WE 2 
‘ 
componentWillReceiveProps (nextProps) { 能 查看 单 | 组 件 的 更 新 过 程 


console.log('ChildComponent : componentWillReceiveProps()'); 
CONSOLe.log('nextProps: ", nextProps); 

} 

shouldComponentUpdate (nextProps, nextState) 
console.log('<ChildComponent/> - shouldComponentUpdate()'); 


CONSoOoles log('nextProps: 's NextProps),; 

console.log('nextState: ', nextState),; 回 子 组 件 添 

return true; 加 更 新 方法 
} 以 便 能 查看 
componentWillUpdate (nextProps, nextState) { 单个 组 件 的 

console.log('<ChildComponent/> - componentWwWillUpdate()');} 

console.l]og('nextProps: ', nextProps),; 更 新 过 程 

console.log('nextState: ', nextState) ， 


} 


componentDidUpdate (previousProps, previousState) 1 


console.log('ChildComponent: componentDidUpdate()'); 
console.log('previousProps: ', previousProps); 
eonsole.log!( "previousStates: *, previousSstate); 

} 

i 

render() { 


console.log('ChildComponent: render'); 
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return [ 
<div key="name">Name: {this.props.name}</div> 
目 当 


} 


class ParentComponent extends Component { 
de men 
onInputChange (e) { 
const text = e.target.value; 
hs, sototatett}) => (Ll texte text }}}3 
} 
' YF 
render() { 
console.log('ParentComponent: render'); 
return |[ 
<h2 key="h2">Learn about rendering and lifecycle methods!</h2>, 
<input key="input" value={this.state.text)} 
onChange={this.onInputChange} />, 
<ChildComponent key="ChildComponent" name={this.state.text} /> 
] ; 
} 
} 
机 


现在 已 经 为 组 件 指定 了 更 新 方法 , 尝试 再 次 运行 并 在 文本 框 中 输入 内 容 。 可 以 在 开发 人 员 控 
制 台中 看 到 级 联 输出 (代码 清单 4-4 展示 了 组 件 应 该 输出 的 内 容 )。 花 点 时 间 仔 细 观 察 泻 染 的 顺 
序 。 注意 到 了 什么 ? 该 顺序 应 该 与 截至 目前 在 本 章 中 所 学 到 的 一 致 ,此 时 便 可 以 理解 子 组 件 和 父 
组 件 的 排序 有 多 重要 了 。 读者 可 能 还 记得 第 2 章 中 React 如 何 递归 形成 一 棵 树 并 进行 演 染 一 一 人 
通过 询问 每 个 组 件 及 其 子 组 件 来 详尽 地 检查 组 件 的 每 个 部 分 。 


代码 清单 4-4 ”有 文本 输入 时 的 组 件 更 新 输出 





ChildComponent : defaultProps 

ParentComponent : defaultProps 

ParentComponent : get initial State 
ParentComponent : componentWillMount 
ParentComponent : render 

ChildComponent : componentWillMount 

ChildComponent : render 

ChildComponent : componentDidMount 

ParentComponent : componentDidMount 
ParentComponent : render “Mark” 被 合 在 一 起 从 而 不 必 为 每 
ChildComponent : componentWillReceiveProps 个 字母 触发 整个 系列 的 更 新 
Object {text: "Mark")} 

<ChildComponent/> : shouldComponentUpdate 
nextProps: ObJjeet {text: "Mark”} \ 
nextnextState: Object {name: "Mark")} 
<ChildComponent/> : componentWillUpdate 

nextProps: OQbJject {text: “MarKk | 

nextState: Object {name: "Mark"} 

ChildComponent : render 

ChildComponent : componentDidUpdate 

BreviousProps 2 Object {texts: ™"} 
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previousSstate : Object {name: "Mark"} 
> 


因为 React 知道 有 关 组 件 树 的 所 有 信息 ， 所 以 它 可 以 按照 恰当 的 顺序 智能 地 创建 组 件 。 在 代 
码 清 单 4-4 中 ,我 们 注意 到 子 组 件 在 父 组 件 之 前 挂 载 。 如 果 考 虑 挂 载 对 于 父 组 件 意 味 着 什么 ， 这 
是 有 道理 的 : 在 父 组 件 挂 载 被 认定 已 为 完成 之 前 子 组 件 必 须 被 创建 。 如 果子 组 件 尚 不 存在 ， 父 组 
件 就 不 能 说 是 已 挂 载 了 。 

男 外 , 我 们 还 注意 到 , 当 更 新 发 生 时 , 子 组 件 接收 到 属性 , 因为 父 组 件 通 过 this.setState () 
更 改 了 该 子 组 件 的 属性 。 自 此 , 更 新 方法 按 shouldComponentUpdate、componentWillUpdate、 
componentDidUpdate 顺 友 运行。 如 果 出 于 某 些 原因 通过 shouldComponentUpdate 返回 
false 来 告诉 组 件 不 要 更 新 ， 这 些 步骤 将 会 被 跳 过 。 


4.2.6 ” 凶 载 方法 


正如 可 以 监听 组 件 的 挂 载 一 样 , 我 们 也 可 以 监听 它 的 种 载 。 印 载 是 从 DOM 移 除 组 件 的 过 程 。 如 
果 应 用 程序 完全 由 React 编写 , 路 由 (第 8 章 和 第 9 章 中 探索 ) 将 会 随 着 用 户 在 不 同 页 面 间 移 动 时 移 
除 组 件 。 也 可 以 将 React 与 其 他 框架 和 库 集成 使 用 ， 因 此 当 组 件 秃 载 时 需要 执行 某 些 其 他 操作 ( 可 能 
是 清除 定时 大、 切换 设置 等 ), 不 管 是 什么 , 都 可 以 在 组 件 被 移 除 时 利用 componentWillUnmount 
进行 任何 需要 的 清理 。 图 4-9 说 明了 和 件 载 过 程 是 如 何 发 生 的 。 


卸载 中 挂 载 中 
当 组 件 已 经 被 挂 载 时 ， 它 “ 活 ” 在 实 挂 载 和 仓 载 由 ReactDOM 从 外 部 控制 (没有 
际 DOM 中 ， 并 可 以 由 React 更 新 以 使 其 ReactDOM 的 帮助 组 件 不 能 外 载 自己 ) ， 但 
与 数据 保持 同步 组 件 可 以 通过 shouldComponentUpdate 来 控 
制 组 件 的 更 新 是 否 应 该 发 生 


已 卸载 ， 组 件 只 存 
在 于 虚拟 DOM 中 











虚拟 DOM 






ReactDOM .render!() 
在 构造 歇 数 中 设置 属性 和 初始 状态 
ReactDOM .hydrate() 
(用 于 服务 器 端 泻 染 ) 
构造 函数 、 演 染 和 生命 周 
| 


A 和 二 用 geldianel 期 方法 中 未 捕获 的 错误 


(不 会 触发 重新 泻 染 ) 


一 旦 挂 载 ， 就 可 以 更 新 


A 
componentDidCatch(error, errorinfo) 





componentWillMount() 


ReactDOM.unmountComponentAtMode() 


4-9 React DOM 负责 挂 载 和 和 伸 载 组 件 。 挂 载 是 将 组 件 插 入 DOM 中 的 过 程 ， 而 外 载 正好 相反 ， 即 指 
从 DOM 中 删除 组 件 的 过 程 。 一 旦 组 件 被 卸载， 它们 就 不 再 存在 于 DOM 中 
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依据 挂 载 的 情况 , 你 可 能 以 为 会 有 componentDidUnmount 方法 , 但 实际 上 并 没有 这 个 方 
法 。 这 是 因为 ， 组 件 一 旦 被 移 除 ， 它 的 生命 就 结束 了 ， 其 无 法 再 做 任何 事情 。 让 我 们 将 
componentWillUnmount 添加 到 运行 的 示例 中 ， 以 便 一 览 组 件 生命 周期 的 全 貌 ， 如 代码 清单 4-5 
所 示 。 


代码 清单 4-5 ”超载 





站 
class ChildComponent extends Component |{ 
大 本 人 和 有 
componentWillUnmount() 1{ 
console.log('ChildComponent: componentWillUnmount"'); 
} 
render() { 
console.log('ChildComponent: render'); 
return |[ 将 component 
<div key="name">Name: {this.props.name}</div> Wouit 
本 方法 添加 到 
父 组 件 和 子 
组 件 中 
class ParentComponent extends Component { 
| i 
componentWillUnmount() { 


console.log('ParentComponent: componentWillUnmount"'); 
} 
onInputChange (e) { 
const text = e.target.value,; 
this.setState(() => ({ text: text })); 
} 
componentDidCatch (err, errorIinfo) { 
console.log('componentDidCatch');} 
Cconsole.error (err);} 
console.error (errorIinfo); 
this Setstate((t}) => ({ Err rrorinto }) 
} 
render() 1{ 
return [| 
<h2 key="h2">Learn about rendering and lifecycle methods!</h2>, 
<input key="input" value={this.state.text} 
onChange={this.onInputChange} />, 
<ChildComponent key="ChildComponent" name={this.state.text} /> 


4.2.7 ”捕捉 错误 


错误 处 理 是 编写 干净 的 程序 最 重要 的 部 分 。 到 目前 为 止 ， 我 们 还 没有 看 到 React 中 用 来 处 理 
错误 的 任何 特殊 方法 。 如 果 你 使 用 React 已 经 有 很 长 时 间 ， 那么 可 能 记得 ， 如 果 React 组 件 的 
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render 或 生命 周期 方法 发 生 了 错误 ， 之 前 版 本 的 React 会 锁定 整个 应 用 程序 。 这 往往 是 挫折 的 
根源 ， 因 为 这 意味 着 未 捕获 的 错误 可 能 会 锁 住 整个 应 用 程序 。 

最 近 版 本 的 React 引入 了 一 个 被 称 为 错误 边界 的 新 概念 来 帮助 解决 这 个 问题 。 如 果 组 件 的 构 
造 函 数 、render 或 生命 周期 方法 抛 出 未 捕获 的 异常 ，React 会 将 组 件 和 它 的 子 组 件 从 DOM 中 印 载 。 
这 乍 看 起 来 似乎 令 人 困惑 ， 但 它 首 的 好 视 相 的 汶 各 部件 的 栓 油 小 所 让 应 用 程序 的 其 余部 分 。 


练习 4-2 组 件 间 的 差异 、 ea 
创建 自 抽象 基 类 1 React .Component. :的 细作 与 创建 自 而 未 经 纺 和 的 组 件 之 问 的 区 


可 以 通过 使 用 组 件 从 React .Component 继承 的 componentDidCatch ee 
错误 。 该 方法 的 语义 与 JavaScript 中 的 try ... catch 的 行为 相似 。componentDidCatch 
可 以 访问 抛 出 的 错误 和 错误 消息 。 使 用 这 些 可 以 确保 组 件 适 当地 啊 应 错误 。 在 大 型 应 用 程序 中 ， 
可 以 使 用 该 方法 为 单个 组 件 ( 可 能 是 小 部 件 、 卡 片 组 件 或 其 他 组 件 ) 设置 错误 状态 或 在 应 用 程序 
级 别 设 置 错误 状态 。 代 码 清单 4-6 展示 了 将 componentDidCatch 方法 添加 到 父 组 件 中 的 方法 。 









代码 清单 4-6 ”处 理 错误 





i 
class ChildComponent extends Component 
Constructor(BroBs) 1 
super (props); 
console.log('ChildComponent: state'); | 绑 定 类 方法 
this.o0ops = this.o0ps.bina (this); 
} 


人 
oops () { 切换 状态 以 便 
this. setSstatel(() => ({ ODS true }))? 抛 出 错误 
} 
render() I{ 
console.log('ChildComponent: render'"'); 
if (this.state,.o0ops) 1 在 render 方法 中 
throw new Error('Something went wrong'); 抛 出 错误 
} 
return [ 


<div key="name">Name: {this.props.name}</div>, 

<button key="error" onClick={this.oops}> 
Create error 

</button> 


} 


class ParentComponent extends Component { 
Be 
constructor (props) { 
super (props); 
console.log('ParentComponent: state'),; 
this.state = { texts: ™ }» 
this.onInputChange = this.onInputChange.bind (this); 
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} 


ri 

componentDidCatch (err, errorIinfo) { i 
console.log('componentDidCatch'); 将 componentDidCatch 方法 添加 到 
console .error (err); 父 组 件 中 并 用 它 更 新 组 件 状态 


console.error (errorIinfo);} 

this.setSstate(() => ({ err, errorIinfo })); 
} 
render() { 

console.log('ParentComponent: render'); 


如 果 抛 出 if (this.state.err) { 


ss return ( 
错误 ， 就 <details style={{ whiteSpace: 'pre-wrap'" }}> 
显示 该 销 {this .state .error && this.state.error.toString()} 
误 和 错误 <i /> 
信息 {this.state.errorIinfo.componentStack)} 
</details> 
) ; 
} 
return [ 


<h2 key="h2">Learn about rendering and lifecycle methods!</h2>, 
<input key="input" value={this.state.text} 
onChange={this.onInputChange} />, 
<ChildComponent key="ChildComponent" name={this.state.text} /> 
]; 


} 


render (<ParentComponent />, document .getElementById('root')); 


至 此 , 我 们 已 经 了 解 React 提供 的 不 同 生命 周期 方法 并 了 解 在 各 种 情况 下 如 何 使 用 它们 。 如 
朱 这 看 起 来 好 像 要 关注 很 多 方法 , 那么 了 解 到 这 些 方 法 构成 了 React 组 件 API 的 绝 大 部 分 ( 也 可 
以 将 表 4-1 当 作 速 查 表 ) 就 让 人 放心 了 。 到 目前 为 止 ，React 核心 API 并 没有 超出 我 们 所 讨论 的 
范围 。 更 重要 的 是 ,不 是 必须 使 用 所 有 这 些 方法 ， 使 用 需要 的 方法 即 可 。 表 4-1 展示 了 到 目前 为 
止 所 涉及 方法 的 概要 (注意 ， 没 有 包含 render )。 


表 4-1 React 组 件 生命 周期 方法 小 结 


初始 方法 “将 执行 ”方法 
defaultProps componentWillMount 
何 物 一 一 多 次 访问 的 静态 版 本 ， | 何 物 一 一 允许 在 加 载 过 程 发 生 
如 果 属 性 没有 被 父 组 件 赋值 ， 就 | 前 操作 组 件数 据 。 例 如 ， 如 果 在 
将 该 值 赋 给 this.props 这 个 方法 中 调用 setState， 
何 时 一 一 当 组 件 被 创建 且 无 法 依 | render () 将 会 看 到 更 新 的 状 
赖 this.props 时 被 调用 。 返回 实 例 | 态 ， 而 且 尽 车 状态 发 生 了 变化 ， 
间 共 享 的 复合 对 象 ， 而 非 副 本 | fenqer () 世 只 执行 一 次 。 更 改 
初始 泻 染 数据 的 “最 后 机 会 ” 















已 完成 ”方法 
componentDidMount 
参数 一 一 无 

何 物 一 一 组 件 插入 DOM 
后 调用 一 次 。 此 时 ， 可 以 
访问 refs (访问 底层 DOM 
表示 的 一 种 方法 ， 将 在 后 
续 章 节 讨 论 )。 通 常 是 执行 
“不 纯 ” 操作 的 好 地 方 ， 如 集 
成 其 他 JavaScript 库 、 设 置 





















挂 载 









挂 载 


更 新 
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续 表 


初始 方法 “将 执行 ”方法 “已 完成 ”方法 
何 时 调用 一 次 , 即 在 客户 端 | 计时 器 (通过 setTimeout 
也 在 服务 器 端 (第 12 章 会 介绍 | 或 者 setInterval), 或 者 
服务 器 端 泻 染 )， 在 最 初 泻 染发 | 发 送 HTTP 请 求 。 我 们 弟 用 














二 之 后 这 个 方法 蔡 换 组 件 中 的 占 位 
数据 
何 时 调用 一 次 ， 只 在 


客户 端 ( 而 不 在 服务 器 
端 !), 在 最 初 泻 染 后 立即 调 
用 。 子 组 件 的 component 
DidMount () 方法 在 父 组 
件 之 前 调用 





































shouldComponentUpdate componentWillReceiveProps | componentDidUpdate 
参数 一 nextProps、nextState | 参数 一 nextProps: Object | 参数 prevProps: 











Object、 prevState: 
Object 

何 物 一 一 在 组 件 更 新 被 刷 
新 到 DOM 后 立即 调用 。 最 
初 泻 染 不 会 调用 该 方法 
何 时 一 一 在 组 件 已 经 更 新 
时 ， 将 这 一 方法 用 作 操 作 
DOM 的 机 会 


何 物 一 一 如 果 shouldComponent 
Update 返回 false， 将 会 完全 跳 
过 render() 直到 下 次 状态 改 
变 。 也 就 是 说 ， 将 不 会 调用 
componentWill Update 和 
componentDidUpdate。 作为 高 
级 性 能 调 优 的 应 急 手 段 特别 有 效 

何 时 当 组 件 接收 新 属性 或 状 
态 时 ， 在 泻 染 前 调用 。 最 初 渔 染 
不 会 被 调用 


何 物 一 一 在 通过 使 用 this. 
set-State() 更 新 状态 而 调用 
render () 之 前 将 这 个 方法 作为 
啊 应 属性 转换 的 机 会 。 可 以 使 用 
this .Props 访问 旧 属 性 。 在 该 
疯 数 中 调用 this.setState () 
不 会 触发 额外 的 泻 染 

何 时 一 一 当 组 件 接 收 新 属性 时 
调用 。 最初 演 染 不 会 调用 该 方法 
componentWillUpdate 
参数 一 nextProps: Object、 
nextState: Object 

何 物 一 一 在 更 新 前 使 用 该 方法 
进行 准备 。 不 能 使 用 setState() 
何 时 当 接 收 新 属性 或 新 状 
态 进 行 泻 染 之 前 立即 调用 。 最 初 
泻 染 不 会 调用 
componentWillUnmount 
参数 一 一 无 

何 物 一 一 在 这 个 方法 里 执行 任 
何必 要 的 清理 , 如 解除 计时 器 或 
清理 componentDidMount 创 
建 的 任何 DOM 元 素 

何 时 一 一 在 组 件 凶 载 之 前 并 即 调用 


































componentDidCatch 
参数 一 一 error、errorInfo 


何 物 一 一 处 理 组 件 里 的 错误 。React 会 外 载 组 件 树 中 发 生 错误 的 组 件 以 及 其 下 的 组 件 
何 时 一 一 在 构造 函数 、 生 命 周期 方法 或 泻 染 方法 内 发 生 错误 时 调用 
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43 开始 创建 Letters Social 


现在 已 经 了 解 了 React 的 生命 周期 方法 以 及 它们 能 做 什么 ,现在 我 们 来 用 一 下 这 些 技能 。 我 
们 将 开始 构建 Letters Social 应 用 程序 。 开始 之 前 , 确保 已 阅读 本 章 的 第 一 节 ， 了 解 如 何 使 用 Letters 
Social 的 代码 仓库 。 开 始 时 应 该 在 start 分 支 上 ,但 如 果 想 跳 至 本 章 结 束 ， 可 以 检 出 chapter-4 分 
支 (git checkout chapter-4 )。 

到 目前 为 止 ， 我 们 一 直 使 用 浏览 器 在 CodeSandbox 上 运行 大 部 分 代码 。 这 对 学 习 来 说 很 好 ， 
但 我 们 将 切换 环境 ， 开 始 在 本 地 计算 机 上 创建 文件 。 我 们 需要 使 用 代码 仓库 中 包含 的 Webpack 
构建 流程 ， 主 要 是 出 于 以 下 几 个 原因 。 

国 能 够 在 多 个 文件 中 编写 JavaScript 并 将 这 些 文件 输出 为 一 个 或 少量 已 自动 解决 依赖 和 导 

入 顺序 的 文件 。 

国 ”能够 处 理 不 同类 型 的 文件 ( 如 SCSS 或 字体 文件 )。 

加 利用 像 Babel 之 类 的 其 他 构建 工具 以 便 能 够 编写 在 旧版 浏览 锅 上 运行 的 现代 JavaScript 代码 。 

国 通过 删除 死 代 码 并 缩小 它 来 优化 JavaScript 代码 。 

Webpack 是 一 个 功能 非常 强大 的 工具 ， 有 许多 团队 和 公司 都 在 使 用 它 。 正 如 本 章 前 面 所 说 ， 我 
不 会 在 本 书 中 介绍 如 何 使 用 它 。 我 的 期 望 之 一 是 本 书 的 读者 不 必 学 习 React 及 其 相关 的 所 有 构建 工 
具 ， 因 为 一 下 子 应 对 这 么 多 东西 过 于 复杂 了 ， 无 法 让 学 习 变 得 简单 。 不 过 ， 如 果 你 愿意 学 ， 可 以 更 
多 地 学 习 Webpack。 花 些 时 间 通 过 Webpack 官方 网 站 了 解 Webpack， 可 以 理解 源 代码 的 构建 过 程 。 

我 们 将 通过 创建 一 个 App 组 件 和 一 个 作为 应 用 入 口 的 主 index 文件 (React DOM 的 render 
方法 被 调用 的 地 方 ) 来 开始 构建 Letters Social。App 组 件 将 包含 一 些 用 API 获取 帖子 的 逻辑 并 将 
泻 染 一 些 帖子 组 件 一 一 接 下 来 将 为 帖子 创建 组 件 。 代 码 仓库 中 还 包含 许多 无 须 自己 创建 的 组 件 。 
我 们 将 在 本 章 和 后 续 各 章 中 使 用 它们 。 代 码 清单 4-7 展示 了 入 口 点 文件 src/index.js。 





代码 清单 4-7 主 应 用 程序 文件 ( src/index.js ) 





import React, { Component } from ‘react'; 导入 React 并 从 React DOM 导入 render 
import { render } from 'réeact-dom'; 方法 这 个 文件 是 主要 调用 React 

/ 小 以 
i DOM 的 render 方法 的 地 方 
import './shared/crash'; 
import './shared/service-worker'; 导入 一 些 错 误 报 告 相关 的 文件 、 一 个 服务 worker 
import './shared/vendor'; 注册 器 ， 以 及 样式 (通过 代码 仓库 来 处 理 ) 
import "./styles/stylés.scss'"; \ 





导 人 App 组 件 的 默认 导出 一 一 代码 用 render ( HTML 模板 在 src/ 


render (<App />, document .getElementBylId('app')); | 在 目标 元 素 上 使 用 主 App 调 
清单 4.9 中 会 创建 这 个 组 件 ol 
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主 应 用 程序 文件 包含 了 一 些 Webpack 可 以 导入 的 样式 的 引用 以 及 对 React DOM 的 render 
方法 的 主要 调用 。 这 是 React 应 用 程序 “启动 ”的 主要 位 置 。 当 浏览 器 执行 脚本 时 ， 它 将 泻 染 主 应 
用 程序 ， 而 后 React 将 接管 后 续 工 作 。 没 有 这 个 调用 ,应 用 程序 将 不 会 执行 。 可 能 还 记得 在 前 面 几 
章 中 , 我 们 在 主 应 用 程序 文件 的 底部 调用 过 这 个 方法 。 这 里 没有 什么 不 同一 一 应 用 程序 将 由 许多 不 
同文 件 组 成 ，Webpack 知道 如 何 将 它们 组 织 到 一 起 ( 多 亏 了 导入 /导出 语句 ) 并 在 浏览 器 中 运行 。 

现在 应 用 程序 有 了 入 口 点 ， 我 们 来 创建 主 App 组 件 。 可 以 将 这 个 文件 以 src/app.js 这 样 的 形 
式 放 在 src 目录 下 。 我 们 将 勾画 出 App 组 件 的 基本 框架 ， 然 后 随 着 进展 填充 它 。 本 章 的 目标 是 让 
主 应 用 程序 运行 起 来 并 显示 一 些 帖 子 。 下 一 章 将 开始 充实 更 多 的 功能 、 添加 创建 帖子 的 能 力 以 及 
添加 发 帖 位 置 。 随 着 探索 React 的 不 同 主题 ， 如 测试 、 路 由 和 应 用 架构 ( 使 用 Redux ), 将 继续 为 
应 用 程序 添加 功能 。 代 码 清单 4-8 展示 了 应 用 程序 组 件 的 基础 部 分 。 





代码 清单 4-8 创建 app 组 件 ( src/app.js ) 





import React, { Component } from "react'";} 
import PropTypes from 'prop-types'; 导 人 App 组 件 
import parseLinkHeader from "parse=—Tink-header'; 需要 的 库 


import orderBy from 'lodash/orderBy'; 


import ErrorMessage from './components/error/Error'; 导入 错误 信息 组 件 和 加 
import Loader from './components/Loader'; 载 组 件 以 供 使 用 


import * as API from './shared/http'; 
import Ad from './components/ad/Ad'; 








A 
import Navbar from './components/nav/navbar'; 叶 人 已 有 的 广告 、 
import Welcome from './components/welcome/Welcome'; 欢迎 和 导航 栏 组 件 
class App extends Component 
CONSTtEOCEOr (DEODS) {1 导入 Letters 的 API 模块， 用 
super (props); 于 创建 和 获取 帖子 
this.state = 1{ 
设置 组 件 的 初 EFLPOLP MU 
堆 状 态 -于 Jondng: Talsm, 
练 路 足 
位 跟踪 量子 以 endpoint: ‘${process.enyv 
及 点 击 获取 更 
多 帖子 的 服务 .ENDPOINT}/posts? page=1& sort=dateé& order=DESC& embed=comments& expand= 
访问 地 址 user& embed=likes 


}; 
} 
static propTypes = { 
children: PropTypes.node 
}; 
render() { 
return ( 
<div className="app"> 
<Navbar /> 


{this.state.loading ? ( 、 
<div className="loading"> | 各 朵 正在 加 载 ， 演 洲 加 载 
组 件 而 不 是 应 用 的 主体 


<LO6ader /> 
</lAiYS 
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) 
<div className="home"> 
<Welcome /> 


<div> 
<button className="block"> 
就 是 在 这 里 添加 Load more Posts 泻 染 欢迎 和 
展示 帖子 的 组 件 </button> 广告 组 件 
< Qiv> 
<div> 
<Ad 
url="https://ifelse .io/book" 
imageUrl="/static/assets/ads/ria.png" 
/> 
<Ad 
url="https://ifelse.io/book" 
imageUrl="/static/assets/ads/orly.jpg" 
» 
</div> 
</div> 
大 让 
</div> 


大 
} 
} 


导出 App 组 件 
export default App; 


有 了 这 个 就 可 以 运行 开发 命令 (npm run dev )， 应 用 程序 至 少 应 该 启动 并 可 以 在 浏览 器 中 
展示 。 如 果 没 有 ， 请 确保 人 至少 运行 一 次 npm run db :seed 来 为 数据 库 生成 示例 数据 。 运 行 npm 
run dev 会 做 下 面 这 些 事 情 : 
启动 Webpack 构建 过 程 和 开发 服务 右 ; 
启动 JSON-server API， 从 而 可 以 啊 应 网 络 请 求 ; 
创建 一 个 开发 服务 絮 ( 用 于 第 12 章 的 服务 需 端 泻 染 ); 

发 生 更 改 时 热 加 载 应 用 程序 〈 因 此 每 次 保存 文件 都 不 必 刷 新 应 用 程序 ); 
通知 构建 错误 (如 果 发 生 ， 它 们 将 显示 在 命令 行 和 浏览 器 中 )。 

当 应 用 程序 以 开发 模式 运行 之 后 ， 应 该 能 够 通过 http://localhost:3000 查看 运行 的 应 用 程序 。 
API 服务 大 运行 在 http://localhost:3500 上 ， 可 以 使 用 Postman 之 类 的 工具 向 它 发 送 请 求 ， 或 者 只 
是 想 用 浏览 副 浏 览 不 同 的 资源 。 

完成 这 些 准 备 事项 之 后 ,应 该 给 App 组 件 添加 获取 帖子 的 功能 ,为 此 ,需要 使 用 Fetch API 
(包含 在 API 模块 中 ) 回 Letters Social API 发 送 网 络 请 求 。 目 前 , 组 件 并 没有 做 太 多 事情 。 除 
了 构造 孙 数 和 演 染 方法 ， 还 没有 定义 任何 生命 周期 方法 ， 所 以 组 件 没有 任何 数据 可 用 。 需 要 
通过 API 获取 数据 ， 然 后 用 这 些 数 据 更 新 组 件 状态 。 另 外 ， 还 要 添加 错误 边界 ， 以 便 组 件 遇 
到 错误 时 可 以 显示 错误 消息 而 不 是 卸载 整个 应 用 。 代 码 清单 4-9 展示 了 如 何 为 App 组 件 添加 
这 些 关 方法 。 
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代码 清单 4-9 当 App 组 件 加 载 时 获取 数据 





a 
COonstructor (DIOoBS) + 
Rs 
this.getPosts = this.getPosts.bind(this); 
| 绑 定 类 方法 , 当 组 件 加 载 时 
componentDidMount () { 用 它 从 API 获取 帖子 
this.qetPosts()? 
} 


componentDidCatch (err, info) { 
console.error (err); 给 应 用 设置 错误 边界 ， 
console.error (info);} 以 便 处 理 错误 
this.setState(() => ({ 


EEL (CIEE 


Letters Social })); 


API 会 在 响应 | | 用 包含 的 API 模块 


getPosts() 1{ 


头 中 返回 分 页 API .fetchPosts (this.state.endpoint) 获取 由 了 

言 息 ， 所 以 使 用 .then (res => { API 模块 使 用 Fetch API, 所 以 
parseLinkHeader return res 需要 拆 出 JSON 格式 的 啊 应 
把 下 一 页 帖子 json () 

的 URL 拿 出 来 .then(posts => { 


const links = parseLinkHeader(res.headers.get ('Link')); 
this.setState(() => (1 


posts: orderBy (this.state.pPosts .concat (posts), 


将 新 帖子 添加 到 state 中 加 'date', 'desc'), 
} ) ) 


endpoint: links.next.url 方 让 
并 确保 它们 正确 排序 更 新 服务 访问 
|) 地 址 的 state 
.Catch (err => 1{ 
this.setState(() => ({ error: err })); 如 果 有 错误 ， 更 
We 新 组 件 的 状态 


} 
render() { 
ye 


<button className="block" onClick={this.getPosts}> 
Load more posts 


</button> 现在 已 经 定义 getPosts， 将 getPosts 方 
//.…， 法 赋值 为 加 载 更 多 的 事件 处 理 需 


KE 


当 应 用 程序 挂 载 后 应 该 马上 获取 帖子 并 将 这 些 数据 保存 到 应 用 的 本 地 组 件 状态 中 。 接 下 来 需 
要 创建 存储 帖子 数据 Post Ge 我 们 将 用 源 代码 附带 的 一 组 预先 存在 的 组 件 创建 Post 组 件 。 这 
些 主 要 是 无 状态 函数 组 件 ， 本 书 的 其 余部 分 将 以 它们 为 基础 。 查 看 src/components/post 目录 来 熟 
一 下 忆 们 |。 

帖子 将 获取 它们 自己 的 内 容 并 自行 和 演 染 , 因此 我 们 可 以 在 后 续 章 节 中 移动 帖子 组 件 。App 组 
件 发 起 获取 帖子 的 请 求 ， 但 其 真正 关心 的 是 帖子 的 ID 和 日 期 ， 帖 子 组 件 本 身 将 负责 加 载 帖子 其 
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余 的 内 容 。 另 一 种 方法 是 让 应 用 程序 组 件 负责 获取 所 有 数据 并 将 数据 传递 给 帖子 , 这 种 方法 的 一 
个 好 处 是 减少 了 发 起 的 网 络 请 求 。 出 于 展示 的 目的 并 且 由 于 我 们 仍 在 关注 学 习 生 命 周 期 方法 , 因 
此 让 帖子 负责 获取 额外 的 数据 ， 但 我 想 指出 另 一 种 清晰 的 方法 。 代 码 清单 4-10 展示 了 创建 Post 
组 件 的 方法 。 在 src/components post/Post.js 中 创建 它 。 


代码 清单 4-10 ”创建 Post 组 件 ( src/components/post/Post.js ) 


import React, { Component } from "Leact " ; 





import PropTypes from 'prop-types'; 关 导入 API 模块 以 
import * as APL from +, /.。.. /shared/http'; 便 获 取 帕 于 
mport Content from '. /Countent" 

import Image from './Image'; 

impert Link from ", /DLink'; 村 人 组 成 Post 
import PostActionSection frem "./PostActionSection'; 的 组 件 
import Comments from '../comment/Comments'; 

import Loader from '../Loader'; 


export class Post extends Component 


| 需要 生命 周期 方法 , 所 以 
static propTIypes = { 9 
post: PropTypes .shape ({ 继承 React.Component 


Comments: BEODPTYDeSs. array; 

content: PropTypes.string, 

date: PropTypes.number, 声明 propTypes 
id: PropTypes.string.isRequired, 

image: PropTypes.string, 

likes: PropTypes.array, 

location: PropTypes.object, 

user: PropTypes.object, 

userId: PropTypes.string 


a ee 
7 Se 
eonstruetor'(props) ({ 状态 并 且 绑 定 类 方法 
SBeE( BEOBS) 
this.state = { : 
BOSts null, | 设置 初始 状态 


comments: [], 
showComments: false, 
User: th1is. props. USer 
1 | 绑 定 类 方法 
this.loadPost = 七 15,1oaaPost .bind(this)’: 
} 
componentDidMount() { | 挂 载 后 加 载 一 个 帖子 


hs LoadPost (this ,proBs .10).} 
} 


loadPost (id) { > 
API .fetchPost (id) 
.then (res => res.json()) 使 用 API 获取 单个 帖 
.then(post => { 子 并 更 新 状态 


this. SetSstatel(l() => 《{ post })); 
be 
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render() 1{ 
if (I!this state ost) 1 


return <Loader />; 
} 如 果 帖 子 还 没 加 载 , 展 
return ( 示 载 和 人 需 组 件 
<div className="post"> 
<UserHeader dates{this.state.post: date) 
i user={this.state.post, uaer]} /> 
<Content post={this.state.post} /> 
组 件 设 置 模拟 <Image post={this.state.post} /> 
数据 <Link link={this.state.post.link} /> 
<PostActionSection showComments={this.state.showComments}/> 
<Comments 
comments={this.state.comments.} 
show={this.state.showComments} 
post={this.state.post)} 
user={this.props.user)} 
/> 
«</dlyv> 


} 


export default Post; 
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最 后 需要 做 的 事情 是 实际 遍历 帖子 以 便 它们 得 以 显示 。 记 住 , 显示 组 件 的 动态 列表 需要 构造 一 
个 数组 (通过 Array .map 或 其 他 方法 ) 并 在 JSX 表达 式 中 使 用 它 。 还 有 ， 不 要 忘记 ，React 要 求 
给 每 个 被 迭代 项 传递 一 个 key 属性 ， 以 便 它 知道 更 新 动态 列表 中 的 哪些 组 件 。 对 于 render 方法 
返回 的 任何 组 件数 组 都 是 如 此 。 代 码 清单 4-11 展示 了 如 何 更 新 App 组 件 的 render 方法 来 遍历 帖子 。 


代码 清单 4-11 遍历 帖子 组 件 ( src/app.js ) 





i 
vp Post from './components/post/Post'; 了] 导入 Post 组 件 
<Welcome /> 
<div> 
{this.state.posts.length && ( 
<div className="posts"> 
遍历 获取 的 所 有 帖子 并 给 每 {this.state.posts.map(({ ia )》 => ( 


个 帖子 泻 染 一 个 Post 组 件 So Os Te et 
user={this.props.user} /> 


别 忘 了 给 遍历 的 每 项 汪 加 了 
加 key 属性 ) } 
<button className="block" onClick={this.getPosts}> 
Load more posts 
</button> 
< /iv 
<div> 
<Ad 
url="https://ifelse.io/book" 
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有 很 多 改进 的 空 


a 


至 此 ， 如 图 4-10 所 示 ， 我 们 泻 染 出 帖子 ， 迈 出 了 开始 Letters Social 的 一 步 。 当 然 ， 这 里 还 
x 间 。 我 们 将 在 下 一 章 介绍 添加 帖子 和 为 帖子 增加 位 置信 息 ， 探 讨 使 用 refs 
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imageUrl="/static/assets/ads/ria.png" 


és 
<Ad 
url="https://ifelse.io/book" 
imageUrl="/static/assets/ads/orly.jpg" 
人 
</div> 





从 


React 组 件 访问 底层 DOM 元 素 的 方法 。 


和 有 


Welcome! 


If you're here, you're probably 
reading React in Action from 
Manning Publications. This app is 
the example application that you' 
build as you go through the book. 
In React im Action, you'll learn: 


Building a simple social app 
es Learning about the 
fundamentals of React 
Building React apps with 
modern javaScript (ES2015 
and beyond) 
How React works (React in 
action covers through React 
16 (fiber)) 
implementing a routing 
system from scratch 
Utilizing server-side rendering 
Testing React applications 
Implementing a Redux 
application architecture 


if you have any questions or 
thoughts, feel free to reach out to 
me 人 markihethomas on the 
Manning Authors forum (you get 
access Wi/ the MEAP!) or on Tyyitter 





和 Jacen solo 


He's holding a thermal detonator! 


Talys, Tralus, and Centerpoint Station 


https-//ifelse io/book 


perhanes vi refer 





4-10 Letters Social 的 第 一 关 。 泻 染 帖 子 并 且 可 以 加 载 更 多 。 


小 结 


下 一 章 中 将 添加 创建 带 位 置信 息 的 帖子 的 功能 


让 我 们 复习 一 下 本 章 学 到 的 内 容 。 
图 通过 创建 继承 React . We 类 的 JavaScript 类 来 创建 React 组 件 ， 该 类 型 组 件 拥 


有 可 以 挂 载 的 生命 周期 。 这 意味 着 它们 拥有 被 React 管理 的 开始 、 中 间 和 结束 的 时 间 。 
由 于 它们 继承 自 React .Component 抽象 基 类 ， 它 们 也 可 以 访问 那些 无 状态 函数 组 件 不 
能 访问 sp React API。 


国 React 提供 了 


命 周 期 方法 ,使 用 者 可 以 用 这 些 方法 挂 载 到 组 件 生命 中 的 不 同 部 分 。 这 
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可 以 让 应 用 在 React 管理 UI 过 程 的 不 同 部 分 进行 适当 的 操作 。 这些 生 命 周期 方法 并 不 是 
必须 使 用 的 ， 只 在 需要 时 借助 它们 。 很 多 时 候 只 需要 无 状态 的 限 数 组 件 就 能 满足 要 求 。 

国 React 提供 了 一 个 方法 来 处 理 在 构造 函数 、 演 染 或 生命 周期 方法 中 出 现 的 错误 
componentDidCatch, 使 用 这 个 方 芍 可 以 在 应 用 程序 中 创建 错误 边界 。 这 就 像 
JavaScript 中 的 try/catch 语句 。 当 React 捕获 错误 时 ， 它 将 从 DOM 中 秋 载 发 生 销 误 的 组 
件 及 其 子 组 件 ， 以 提高 泻 染 的 稳定 性 并 防止 整个 应 用 程序 毅 省 。 

国 我们 已 经 开始 构建 Letters Social， 我 们 将 在 本 书 的 剩余 部 分 使 用 这 个 项 目 来 探索 React 
的 主题 。 该 项 目的 最 终 版 本 位 于 https://social.react.sh， 可 以 从 本 书 的 GitHub 上 找到 其 源 
代码 。 

下 一 章 我 们 将 开始 为 Letters Social 添加 更 多 功能 。 我 们 将 重点 关注 添加 动态 创建 帖子 的 功 

能 ， 甚 至 使 用 Mapbox 给 帖子 添加 位 置信 息 。 





本 章 主要 内 容 

加 在 React 中 使 用 表单 元 素 

加 ”React 中 的 受 控 与 非 受 控 表 单 组 件 
， 国 ， 在 React 中 验证 和 清理 数据 


到 目前 为 止 ， 我 们 已 经 了 解 了 一 些 用 React 构建 简单 组 件 的 基础 知识 : 生命 周期 钩子 、 
PropTypes 和 大 多 数 高 层 组 件 API。 我 们 已 经 初步 了 解 了 基本 原理 并 可 以 做 一 些 简单 的 事情 ， 如 
更 新 组 件 本 地 状态 、 使 用 props 在 组 件 之 间 传 递 数据 等 。 男 外 我 们 还 介绍 了 组 件 结构 、 组 件 化 思 
维 方式 和 生命 周期 方法 。 

我 们 在 将 本 章 更 多 地 应 用 这 些 知 识 并 真正 开始 构建 示例 应 用 Letters Social。 我 们 将 创建 用 户 用 来 
新 建 Letters Social 帖子 的 组 件 。 首 先 , 我 们 将 研究 整个 问题 并 审查 数据 需求 ,然后 讨论 React 中 的 表 
单 并 构建 组 件 的 功能 。 到 本 章 结束 时 ， 读 者 应 该 能 学 会 如 何在 React 应 用 中 使 用 表单 。 

如 何 获 取 本 章 代 码 ee z we 

和 每 章 一 样 ， 读 者 可 以 去 GitHub 仓库 检 出 源 代 码 。 如 果 想 从 头 开始 编写 本 章 代 码 ， 可 以 使 用 第 4 
章 的 已 有 代码 ( 如 果 跟 着 编写 了 示例 ) 或 直接 检 出 指定 章 的 分 支 ( chapter-5-6 )。 

记 住 ， 每 个 分 支 对 应 该 章 末 尾 的 代码 ( 例如 ,， chapter-5-6 对 应 第 5 章 和 第 6 章 末 尾 的 代码 )。 读者 
可 以 在 选 定 目录 下 执行 以 下 终端 命令 之 一 来 获取 当前 章 的 代码 。 

如 果 还 没有 代码 库 ， 请 输入 下 面 的 命令 来 获取 : 

git clone git@github.com:react-in-action/letters-social .9git 

如 果 已 经 克隆 过 代码 仓库 : 

git checkout chapter-5-6 

如 果 你 是 从 其 他 章 来 到 这 里 的 ， 则 需要 确保 已 经 安装 了 所 有 正确 的 依赖 : 


npm install 
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5.1 在 Letters Social 中 创建 帖子 


到 目前 为 止 ， React 应 用 Letters 除了 能 让 你 阅读 一 些 信息 还 做 不 了 什么 。 一 个 只 读 的 社交 网 
络 更 像 是 图 书馆 ， 然 而 这 不 是 假想 的 投资 者 想 要 的 。 我 们 需要 实现 的 第 一 个 特性 就 是 发 帖 。 我 们 
将 要 实现 的 功能 是 用 户 使 用 表单 发 帖 并 在 信息 流 中 展示 它们 。 开 始 前 , 我 们 将 梳理 数据 需求 并 大 
致 了 解 所 面 对 的 问题 ， 以 便 完 全 明白 所 要 完成 的 工作 。 


5.1.1 数据 需求 


我 们 将 开始 使 用 一 些 浏览 器 HTTP 库 来 向 伪 API 服务 器 发 送 数 据 。 你 可 能 已 经 对 这 些 东 西 的 
工作 方式 有 一 点 点 了 解 , 并 且 了 解 如 何 使 用 JavaScript 调用 REST 风格 以 及 其 他 类 型 的 Web API， 
因此 我 不 会 深入 介绍 这 一 点 。 如 果 你 没有 任何 浏览 絮 HTTP 或 服务 器 通信 的 经 验 , 有 许多 优秀 的 
资源 可 以 参考 ， 如 Nicolas G. Bevacqua 的 JavaScript Application Design。 

当 使 用 API 时 , 发 送 的 数据 通常 需要 符合 某 种 契约 。 如 果 数 据 库 期 望 存 储 用 户 信 息 , 发 送 的 
数据 会 被 要 求 包含 姓名 、 邮 箱 或 者 个 人 相片 等 信息 。 数 据 通 凋 必须 具有 特定 的 格式 ， 否则 服务 天 
将 会 拒 收 。 因 此 ， 当 前 的 首要 任务 就 是 要 和 弄 清楚 服务 天 需要 怎样 的 数据 格式 。 

代码 清单 5-1 展示 了 Letters Social 中 帖子 的 基本 数据 结构 。 我 们 在 这 里 使 用 了 一 个 简单 的 
JavaScript 类 ， 因 为 服务 器 实际 上 也 是 这 么 做 的 。 当 用 户 发 帖 时 ， 回 服务 硕 发 送 的 数据 需要 包含 
此 模型 中 定义 的 大 部 分 字段 。 注 意 ， 帖子 可 以 包含 很 多 有 用 的 属性 ， 如 位 置信 息 一 一 第 6 章 将 创 
建 添加 位 置 的 功能 。 服 务 右 会 给 没有 指定 的 属性 赋 默 认 值 , 但 会 忽 赂 未 害 义 的 其 他 属 性 。 浏 览 厦 
中 无 须 做 的 事情 是 创建 唯一 的 ID 一 一 服务 顺 会 做 这 部 分 工作 。 





代码 清单 5-1 ”帖子 的 数据 结构 ( db/models.js ) 


export class Post { 
constructor (confi9g) 1 

ALB 40 = 了 二 
this.comments = config.comments || []:; 
this.content = config.content || null; 
this.date = config.date || new Date() .getTime (); 
this.image = config.image || null; 
this.Jikes = Config.likes || []; 
this. Li1nK = SOoOnfLg. Lank || nil 
thisrlocation = Config.location || mull; 
this.userId = config.userId; 


} 


5.1.2 组 件 概览 与 层级 
现在 已 经 对 要 使 用 的 数据 有 了 一 点 点 了 解 ， 可 以 开始 考虑 如 何以 组 件 的 形式 展示 这 些 数据 
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了 。 我 们 正在 创建 的 这 类 社交 网 络 应 用 有 很 多 例子 ， 所 以 应 该 不 难 想 出 见 过 的 例子 。 图 5-1 展示 
了 我 们 正在 构建 的 最 终 产 品 ， 我 们 可 以 从 中 得 到 一 些 局 发 。 
















Mark Thomas ?i (% 
\ 
Welcome! What's on your mind? 
. 
if you're here, you're probably Add location [1 
reading React in Action from 
Manning Publications. This app 
is the example application that 
you'|| build as you go through 也 Mark Thomas 0 minutes ago 
the book. In React in Action, 
you'll learn: Wow much cool 
»。 Building a simple social ,让 中 i 
| : ~ “Union City. 划 ' 
app " A 人 ) 
e。 Learning about the 也 人 ;> ; 上 is ses rr 
fundamentals of React % Wk 人 1 (ay 4 A A y Hom yet Ap etmeely chan rhe sine Lotort thes tony lrc ans 
。 Building React apps with cP Ne SS 人 
modernjavaScript wed a ty 二 和 总 
(ES2015 and beyond) he i ) rr NS 地 
s。 How React works (React we i A NE 
in action covers through 一 一 了 NewYork, New York, United States 
Reacy 16 (fiber)) 
i 中 DY 
es lImplementing a routing > 


system from scratch 
Utilizing server-side 
rendering 





Real World "efi 
。 Testing React applications CG Mark Thomas A el 
8 Rewriting Your Front 
es。 Implementing a Redux 好 
stop te . End Every Six Weeks 
Check out the book at https://www.manning.com/books/react-in-action! : 
if you have any questions or O RLY’ we fhetieal le 
thoughts, feel free to reach out 中 DY ads by Letters 


to me @markthethomas on the 


5-1 正 构建 的 Letters Social 应 用 的 最 终 状 态 。 能 想 出 什么 办 法 将 其 分 解 成 组 件 吗 


在 本 书 前 面 ， 我 曾 谈 及 建立 组 件 层次 结构 及 关系 并 强调 了 它们 在 用 React 创建 应 用 中 的 
重要 性 。 在 开始 创建 组 件 之 前 ， 我 们 要 再 强调 一 遍 。 下 面 是 到 目前 为 止 Letters Social 中 已 实 
现 的 功能 

加 来 和 目 API 的 可 用 的 帖子 数据 ， 有 些 帖子 包含 图 片 ， 有 些 帖子 包含 链接 ; 

每 个 帖子 的 用 户 数据 ， 包 含 头像 信息 ; 

国 作为 整个 应 用 总 控 的 App 组 件 ; 

国 ” 夫 代 来 目 API 的 数据 时 使 用 的 Post 组 件 。 

我 们 需要 添加 创建 帖子 的 功能 , 并 且 这 些 帖 子 有 位 置信 息 和 文本 内 容 。 我 们 需要 让 用 户 选 择 
位 置 ， 然 后 在 信息 流 的 每 个 帖子 中 展示 这 个 位 置 。CreatePost 组 件 应 该 放 在 哪里 ?根据 原型 和 用 
户 的 需求 ,似乎 把 它 作 为 迭代 的 帖子 列表 的 同 级 别 比较 合理 , 所 有 这 些 都 放 在 主 App 组 件 中 ,如 
图 5-2 所 示 。 

来 看 看 如 何 为 组 件 创建 骨架 。 只 创建 泻 染 组 件 基本 元 素 的 基础 、 导 入 正确 的 工具 、 导 出 组 件 
类 ， 并 设置 之 后 要 定义 的 PropTypes。 代 码 清 单 5-2 展示 了 如 何 创建 这 个 基础 骨架 。 
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pe 








pp 组件- 
E 四 创建 帖子 ? 
| 
帖子 组 件 | 
{帖子 数据 ) | 
站 





CreatePost 组 件 将 放 在 用 于 显示 帖子 的 组 件 之 外 


代码 清单 5-2 ”创建 组 件 的 骨架 ( src/components/post/Create.js ) 


ijmport React, { Component } from '‘'react'; 
import PropTypes from ‘prop-types’; 





导入 React 和 PropTypes 对 象 ， 
以 便 使 用 


class CreatePost extends Component 1 3 | 创建 一 个 React 组 件 


static propTypes = 1 
} 
constructor (props) { 在 类 中 声明 PropTypes 


super (props ) ; 静态 属性 
} 
render () { 设置 构造 晒 数 ， 
0 稍 后 会 用 到 它 
<div className="create-post"> 
Create a Post 一 coming (veéry) soon 
</div> 
); 
} 
, 导出 组 件 以 便 在 
export default CreatePost; 其 他 地 方 使 用 


5.2 React 中 的 表单 


本 章 中 构建 的 两 个 组 件 都 涉及 表单 的 使 用 。 Web 表单 仍然 类 似 于 纸 质 表单 一 一 它们 是 接收 和 
记录 输入 的 结构 化 手段 。 在 纸 上 ， 可 以 用 钢笔 或 铅笔 来 记录 信息 ， 而 在 浏览 器 表单 中 ,可 以 使 用 
键盘 、 鼠 标 和 计算 机 上 的 文件 来 捕获 信息 。 你 可 能 已 经 很 熟悉 许多 表单 元 素 了 ， 如 input、 
select 和 textarea 等 。 

大 部 分 Web 应 用 在 某 种 程度 上 都 会 涉及 表单 。 我 还 从 来 没有 开发 过 一 款 部 署 到 生产 环境 却 
不 涉及 任何 表单 的 应 用 。 我 还 发 现 表 单 由 于 难 用 有 时 名 声 欠 佳 。 也 许 正 是 出 于 这 个 原因 , 许多 框 
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架 已 实现 了 针对 表单 的 “神奇 ”方法 以 寻求 减轻 开发 人 员 的 负担 。React 并 未 采用 神奇 的 方式 ， 
但 它 却 能 让 表单 更 容易 使 用 。 


5.2.1 :开始 使 用 表单 


前 端 框架 之 间 并 没有 标准 的 表单 处 理 方式 。 在 一 些 框架 和 库 中 ,可 以 设置 表单 模型 ,该 模型 
会 随 用 户 更 改 表单 值 而 进行 更 新 并 且 内 置 了 专门 的 方法 检测 表单 何 时 处 于 不 同 的 状态 。 男 一 些 框 
架 和 库 在 表单 方面 实现 了 不 同 的 范式 和 技术 。 这 些 框架 的 共同 之 处 在 于 它们 处 理 表单 的 方式 稍 有 
不 同 。 

我 们 应 该 如 何 看 待 这 些 不 同 的 方法 呢 ? 一 个 比 另 一 个 更 好 吗 ? 很 难说 一 种 方法 是 否 从 根本 
上 优 于 另 一 种 , 但 有 时 “更 容易 使 用 ”的 方法 可 能 隐藏 潜在 的 机 制 和 逻辑 。 这 并 非 总 是 坏事 
有 时 候 开 发 者 并 不 需要 了 解 框 架 的 内 部 实现 。 但 是 , 开发 者 确实 需要 有 足够 的 理解 来 文 撑 一 个 思 
维 模型 ， 而 该 模型 让 开发 者 能 够 创建 可 维护 的 代码 并 在 bug 出 现时 修复 它们 。 在 我 看 来 , 这 正 是 
React 的 亮点 所 在 。 当 涉及 表单 时 不 会 给 开发 者 太 多 “魔法 ”, 他 们 会 在 必须 过 多 了 解 表单 和 过 少 
了 解 之 间 找 到 很 好 的 中 间 地 带 。 

幸运 的 是 ，React 中 表单 的 思维 模型 更 多 的 是 你 已 经 了 解 的 东西 ， 并 没有 特别 的 API 集合 需 
要 使 用 , 表单 只 是 我 们 在 React 中 看 到 的 东西 : 组 件 ! 开发 者 使 用 组 件 、 状 态 和 属性 来 创建 表单 。 
因为 是 基于 之 前 所 学 进行 构建 ， 所 以 在 继续 之 前 先 来 回顾 一 下 React 思维 模式 的 部 分 内 容 。 

加 ”组件 有 两 种 主要 的 方式 处 理 数据 状态 和 属性 。 

图 ”因为 组 件 是 JavaScript 类 ,所 以 除了 生命 周期 钩子 , 组 件 还 可 以 拥有 目 定 义 的 类 方法 , 它 

们 可 以 用 来 啊 应 事件 和 做 任何 事情 。 

图 与 常规 的 DOM 元 素 一 样 ， 可 以 在 React 组 件 上 监听 诸如 点 击 、 输 入 变化 和 其 他 事件 。 

国父 组 件 (如 表单 元 素 ) 可 以 将 回调 方法 作为 属性 提供 给 子 组 件 ， 使 组 件 之 间 能 够 通信 。 

在 构建 用 于 创建 帖子 的 组 件 时 ， 将 使 用 这 些 熟 悉 的 React 思想 。 





5.2.2 ”表单 元 素 和 事件 


要 创建 帖子 ， 需 要 确保 将 帖子 存储 到 数据 库 中 、 更 新 帖子 的 UI， 以 及 更 新 用 户 的 帖子 列表 。 就 
像 构 建 常规 HTML 表单 一 样 ， 首 先 要 搭建 好 需要 构建 的 表单 元 素 。 标 记 并 不 多 一 一 只 需要 接收 一 个 
输入 并 且 不 需要 显示 其 他 内 容 。 代码 清单 5-3 展示 了 组 件 的 初始 部 分 : 泻 染 一 个 textarea 输入 框 。 








代码 清单 5-3 加 CreatePost 组 件 添加 内 容 ( src/components/post/Create.js ) 


区 
class CreatePost extends Component { 
render() I 
return ( 
<div className="create-post"> 
<textarea 
placeholder="What's on your mind?" 
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> 
</div> 
<button>Post</button> 
</div> 
); 
} 
} 
8 


现在 已 经 为 表单 创建 了 基本 标记 , 可 以 开始 将 它们 连接 起 来 了 。 读者 应 该 还 记得 在 前 面 草 市 
中 提 到 过 ，React 能 够 像 常规 浏览 器 JavaScript 那样 让 开发 者 与 事件 进行 交互 。 它 允许 开发 者 监 
听 诸 如 点 击 、 滚 动 和 其 他 常规 事件 ， 并 对 它们 做 出 响应 。 在 处 理 表单 时 ， 我 们 将 利用 这 些 事件 。 


注意 ”如果 你 已 经 做 了 一 段 时 间 的 前 端 开 发 工作 ， 那 应 该 知道 不 同 浏览 器 之 间 会 有 很 多 不 一 致 的 

地 方 ， 尤 其 是 涉及 事件 时 。 除 了 其 他 可 以 获得 的 各 种 好 处 ，React 还 做 了 大 量 工 作 来 抽象 这 些 浏览 

器 实现 中 的 差异 。 这 是 个 没有 得 到 太 多 关注 的 优点 ， 但 却 有 莫大 的 帮助 。 不 必 过 多 担心 浏览 器 之 间 

的 差异 ， 可 以 计 开 发 者 更 关注 应 用 的 其 他 领域 ， 这 通常 会 让 开发 者 更 开心 。 

随 着 用 户 交 互 ， 浏 览 右 中 可 能 会 出 现 许多 不 同 的 事件 ， 包 括 鼠 标 移动 、 键 盘 输入 、 点 击 等 。 
当 涉 及 应 用 时 ,我 们 应 该 特别 关注 其 中 一 些 类 型 的 事件 。 对 我 们 来 说 ,要 使 用 两 个 主要 的 事件 处 
理 程序 进行 监听 

国 onChange 





onChange 和 和 onClick。 
当 input 元 素 发 生变 化 时 触发 。 可 以 使 用 event .target .value 来 访 








问 表单 元 素 的 新 值 。 
图 ”onClick 一 一 当 元 素 被 点 击 时 触发 。 可 通过 监听 此 事件 来 了 解 用 户 何 时 想 要 回 服 务 硕 发 
送 帖子 。 


接 下 来 将 为 这 些 事件 分 配 一 些 事 件 处 理 程序 。 现 在 , 我 们 将 为 这 些 函 数 添 加 控制 台 日 志 以 便 
观察 它们 的 触发 情况 ， 稍 后 再 用 真正 的 功能 蔡 换 它们 。 代 码 清单 5-4 展示 了 如 何 通 过 在 组 件 类 的 
构造 杯 数 中 绑 定 事件 处 理 程 序 ， 然 后 在 组 件 中 分 配 它们 来 设置 事件 处 理 程序 。 


代码 清单 5-4 ”向 CreatePost 组 件 添 加 内 容 ( src/components/post/Create.js ) 





class CreatePost extends Component { 

GONSTtEUCtOr (BEOBPS) { 绑 定 类 方法 以 处 理 帖 
super (props); 子 的 提交 和 更 改 
this.handleSubmit = this.handleSubmit.bind (this),; 

NLS Pp n = is.hanadleP hange .Di i : 
this.handlePostChange 了 a 2 5 ge.blna(thils) 在 类 上 声明 当 正 
} 声明 处 理 提交 事件 的 方法 ，React > 
| 会 把 事件 传递 给 处 理 程序 | 
handqlePostCchange (e) { 时 (onChange 事 
console.log('Handling an update to the Post body!'); 件 ) 需要 使 用 的 
} . 
方法 


handleSubmit() { 
console.log('Handling submission!'); 


} 
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render() { 
return ( 
<div className="create-post"> 
将 事件 处 理 程 <button onClick={this.handleSubmit}>Post</button> 
序 传递 给 Bitton ie a 
value={this.state.content 
和 textarea 组 件 onChande={this.handlePostChange} 组 件 的 值 将 从 组 
placeholder="What's on your mind?" 件 state 中 读 取 
人 
</div> 


)》 ; 
} 
} 


事件 处 理 程序 接收 一 个 合成 事件 作为 参数 ， 我 们 可 以 访问 这 个 合成 事件 上 的 许多 可 用 属性 。 
表 5-1 展示 了 合成 事件 上 可 以 访问 的 一 些 属性 。 这 里 所 说 的 合成 事件 指 的 是 由 React 从 浏览 希 事 
件 转换 而 来 的 ， 开 发 者 可 以 在 React 组 件 中 使 用 的 事件 。 


表 5-1 React 合成 事件 中 可 用 的 属性 和 方法 


属性 返回 值 
bubbles boolean 
cancelable boolean 
currentTarget DOMEventTarget 
defaultPrevented boolean 
eVentPhase number 
ilsTrusted boolean 
natijveEvent DOMEvent 
preventDefault () 
lsDefaultPrevented () boolean 
stopPropagation() 
ijsPropagationStopped() boolean 
target DOMEventTarget 
timeStamp number 
type String 


继续 之 前 , 我 们 稍 作 尝 试 : 在 post 组 件 的 change 事件 处 理 程序 中 添加 console .1og (event)。 
打开 浏览 器 的 开发 者 控制 台 并 在 textarea 元 素 中 输入 一 些 内 容 ， 应 该 会 看 到 打印 出 来 的 消息 
(参见 图 5-3 )。 如 果 探 查 这 些 对 象 或 尝试 访问 表 5-1 中 的 一 些 属性 , 应 该 能 获取 有 关 事 件 的 信息 。 
对 我 们 而 言 , 我 们 将 关注 获取 到 的 target 属性 。 记 住 , 与 通常 的 JavaScript 一样 , event .target 
只 是 对 发 出 事件 的 DOM 元 素 的 引用 。 


106 第 5 章 在 React 中 使 用 表单 


What's on your mind? 


Submit 


Elements Console Sources sr Timeline Profiles A » 


| top v Preserve log 
Console was cleared VM1987 ;1 
< Undefined 
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent， Create. is?966e:2 
> dispatchIinstances: ReactDOMComponent, nativeEvent: Event, type: 
"change"..} 
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, 
> dispatchIinstances: ReactDOMComponent, nativeEvent: Event, type: 
"change".} 


Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent， reat ?966e:21 
>» dispatchinstances: ReactDOMComponent, nativeEvent: Event, type: 
“change"..} 


Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent， ate.is?966e:21 
> dispatchIinstances: ReactDOMComponent, nativeEvent: Event, type: 
"change".} 


> | 





5-3 ”React 将 一 个 合成 事件 传递 给 使 用 者 设置 的 事件 处 理 程序 。 这 是 一 个 规范 化 的 
事件 ， 这 意味 着 可 以 如 同 访问 常规 浏览 器 事件 那样 访问 相同 的 属性 和 数据 


5.2.3 ”更 新 表单 状态 


现在 已 经 可 以 监听 事件 并 在 组 件 监 听 更 新 和 提交 事件 时 进行 观察 , 但 还 没有 对 数据 做 任何 处 
理 。 此 时 ， 需 要 对 事件 进行 一 些 处 理 来 更 新 应 用 的 状态 。 这 正 是 React 处 理 表 单 的 关键 方法 : 通 
过 事件 处 理 程序 接收 事件 ， 然 后 使 用 来 自 这 些 事 件 的 数据 更 新 状态 或 属性 。 

状态 和 属性 是 React 让 使 用 者 处 理 数据 的 两 种 主要 方式 。 如 果 现 在 在 表单 中 输入 一 些 内 容 ， 
什么 也 不 会 发 生 。 乍 一 看 ， 这 似乎 是 个 错误 ， 但 其 实 这 正 是 React 尽职 尽责 的 表现 。 想 想 看 : 当 
用 户 更 改 输入 的 值 时 ， 用 户 正 在 变更 DOM， 而 React 的 主要 职责 之 一 就 是 确保 DOM 与 从 组 件 
创建 的 虚拟 DOM 保持 同步 。 

由 于 没有 更 改 虚 拟 DOM 中 的 任何 内 容 (没有 更 新 状态 ) 因此 React 不 会 对 实际 的 DOM 做 
任何 更 新 。 这 是 一 个 React 实际 发 挥 作 用 的 很 好 的 例子 ， 它 漂亮 地 完成 了 工作 。 如 果 还 是 能 够 更 
新 表单 值 ， 使 用 者 就 无 意 间 将 自己 置 于 “诡异 ”的 境地 ， 事 物 不 同步 而 使 用 者 需要 回 到 老 的 做 事 方 
式 (这 正 是 React 一 开始 改进 的 地 方 )。 
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要 更 新 状态 ， 开 发 者 需要 监听 当 输入 值 改 变 时 React 发 出 的 事件 。 当 此 事件 触发 时 ， 可 以 从 
中 提取 一 个 值 并 使 用 这 个 值 更 新 组 件 的 状态 ， 这 让 开发 者 有 机 会 控制 更 新 过 程 的 每 个 步 又。 

让 我 们 看 看 如 何 将 这 些 付 诸 实现 。 代 码 清单 5-5 展示 了 如 何 设置 事件 处 理 程序 来 处 理 用 户 更 
改 数据 值 时 监听 和 更 新 组 件 状态 。 稍 后 将 使 用 之 前 用 到 的 event .target 引用 并 访问 其 value 
属性 来 用 textarea 元 素 的 值 更 新 状态 。 





代码 清单 5-5 “使 用 输入 来 更 新 组 件 状态 ( src/components/post/Create.js ) 


class CreatePost extends Component { 
CONStructor (poOBS) 1{ 
super (props); 





// Set up state 
this.state = { 
Contents >- 


> 


// Set up event handlers 
this.handleSubmit = this.handleSubmit.bind (this);} 
this.handlePostChange = this.handlePostChange.bind (this); 
} 
handlePostChange (event) { 


const content = eVent .target .value; 
this.setState(() => { 从 DOM 元 素 的 value 属性 获取 textarea 元 


ti 素 的 值 ( 想 要 用 什么 更 新 state ) 
content, 
}; 
}); 使 用 该 值 设置 state 并 使 
handleSubmit() { 用 新 值 更 新 它 
console.log(this.state); 
} 要 查看 被 更 新 的 state, 点 击 表单 
提交 按钮 并 探查 开发 者 控制 台 
render() 1:{ 
return ( 


<div className="create-post"> 
<button onClick={this.handleSubmit}>Post</button> 
<textarea 


value={this.state.content} 
onChange={this.handlePostChange)} 将 新 值 提供 给 
placeholder="What's on your mind?" | textarea 元 素 
/> 
</div> 


5.2.4” 受 控 和 非 受 控 组 件 
这 种 更 新 表单 中 组 件 状态 的 方式 可 能 是 React 中 最 常见 的 表单 处 理 方式 一 一 通过 使 用 事件 和 
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事件 处 理 需 更 新 状态 来 严格 控制 如 何 更 新 。 按 照 此 过 程 设 计 的 组 件 通 常 被 称 为 受 控 组 件 。 这 是 因 
为 我 们 严格 地 控制 组 件 以 及 状态 如 何 变化 。 但 还 有 另外 一 种 使 用 表单 的 组 件 的 设计 方法 ,， 称 为 非 
受 控 组 件 。 图 5-4 展示 了 受挫 和 非 受 控 组 件 的 工作 方式 并 说 明了 它们 之 间 的 一 些 差异 。 














受 控 组 件 
ey 0 
通用 组 件 | 
处 理 更 新 | 
， 验证 数据 ， ;| 
' ”检查 数据 ， ; | 
| 清理 数据 ， | 
合成 事件 ea | 
pe ee ea ees 更 新 组 件 | 
| <textarea | 状态 | 
| | onChange={this.handleUpdate} | | 
] | value={this.state.content} | | 
| | 可 | 从 状态 中 设置 新 值 
| | </textarea> | 
| i ee 
非 受 控 组 件 
| 处 理 更 新 | 
] 验证 数据 ，， | 
| ' ”检查 数据 ， ;| 
| ”清理 数据 ， | 
| 合成 事件 Pe | PP > 
一 一 一 一、 更 新 组 件 | 
<textarea 状态 | 
onChange={this.handleUpdate} 
> 


</textarea> | 不 要 全 


[ee 
Na 





jl 
wt 








图 5-4 受 控 组 件 监听 由 DOM 元 素 发 出 的 事件 ， 操 作 发 出 的 数据 ， 更 新 组 件 状态 并 设置 元 素 的 值 。 
这 使 所 有 东西 都 保持 在 组 件 领域 并 创建 出 一 个 统一 的 状态 宇宙 。 非 受 控 组 件 维 护 它 们 自己 的 
内 部 状态 并 在 组 件 中 创建 出 一 个 微型 世界 ， 这 切断 了 对 该 状态 的 访问 和 控制 


在 非 受 控 组 件 中 ， 组 件 保持 目 己 的 内 部 状态 ， 而 不 再 使 用 value 属性 来 设置 数据 。 开 发 者 
仍然 可 以 使 用 事件 处 理 程序 监听 输入 框 的 更 新 ,但 不 再 管理 输入 框 的 状态 。 代 码 清单 5-6 展示 了 
使 用 非 受 控 组 件 的 方法 。 我 们 在 本 书 中 将 坚持 使 用 受 控 组 件 , 但 重点 是 至 少 要 知道 非 受 控 组 件 这 
种 模式 实际 是 什么 样子 的 。 





代码 清单 5-6 


class CreatePost extends Component { 
constructor(props) { 





使 用 非 受 控 组 件 ( src/components/post/Create.js ) 
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super (props); 
this.state = { 
content: ' 
$F 


this.handleSubmit = this.MandleSubmit.bind (this); 


this.handlePostChange = this.handlePostChange.bind (this); 处 理 程序 与 以 
} 前 相同 ,但 是 更 
改 state 的 效果 
handlePostChange (event) 1{ 不 相同 
const content = eVent .target .value; 
this.setState(() => { 
return 
content, 
}; 
}); 
} 
handleSubmit() { i i es 
console.log(this.state); | 处 理 程序 与 以 前 相同 ， 但 是 更 
} es 改 state 的 效果 不 相同 
render() 1{ 
return ( 


<div className="create-post"> 
<button onClick={this.handleSubmit}>Post</button> 
<textarea 


onChange={this.handlePostChange)} J 
placeholder="What's on your mind?" 如 前 所 述 , 现在 没有 value 


/> 元 素 监 听 组 件 状 态 
</div> 
); 
} 
} 


5.2.5 ”表单 验证 与 清理 


使 用 表单 记录 和 存储 用 户 输入 的 一 个 重要 部 分 是 让 用 户 知道 他 们 什么 时 候 违 反 了 开发 者 设 
置 的 验证 规则 ,以 及 他 们 什么 时 候 提 供 的 数据 不 能 满足 当前 应 用 。 我 们 希望 ， 从 客户 端 接收 数据 
的 服务 硕 应 用 有 严格 的 数据 验证 与 清理 程序 一 一 不 能 依赖 浏览 器 应 用 来 完成 这 个 领域 的 所 有 工 
作 。 而 且 即 便服 务 占 上 有 良好 的 数据 验证 和 清理 程序 , 仍然 需要 在 前 端 提 供 并 执行 良好 的 数据 实 
践 以 帮助 用 户 、 增 加 另 一 级 对 危险 分 子 的 防范 以 及 提高 数据 完整 性 。 如 果 不 这 样 做 ， 可 能 会 让 用 
户 感到 困惑 ， 存 在 安全 漏洞 以 及 无 意义 的 数据 ， 这 些 都 是 不 想 遇 到 的 问题 。 

正如 目前 所 看 到 的 ， 使 用 表单 更 新 组 件 状态 涉及 了 state 、props 和 组 件 方法 ， 就 像 React 中 
的 其 他 东西 一 样 。 要 回 组 件 添 加 验证 和 清理 功能 ,开发 者 需要 挂 载 到 更 新 过 程 中 去 。 为 此 ， 开 发 
者 需要 编写 通用 的 验证 和 清理 功能 ， 这 些 功 能 可 以 在 能 够 使 用 JavaScript 的 任何 地 方 使 用 并 且 可 
能 在 大 部 分 其 他 前 端 框架 中 也 可 以 使 用 。 
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红 习 5-1 思考 React 事件 和 表单 人 人 
“ 花 一 分 钟 时 间 想 一 想 ， 到 目前 为 止 你 对 React PT React + 中 的 事件 与 济 
器 中 处 理 的 事件 有 不 同 之 处 四? 如 果 有 ， 它 们 有 什么 不 同 ? 


幸运 的 是 ,正在 创建 的 CreatePost 组 件 不 需要 进行 大 量 的 验证 ， 只 需要 检查 最 大 长 度 并 进行 
一 些 额 外 验证 以 便 组 件 不 会 加 API 服务 器 提交 空 帖子 即 可 。 为 了 学 习 和 本 地 开发 , 我 们 搭建 了 一 
个 简单 的 服务 器 ,， 它 接收 大 多 数 净 人 往 而 不 做 太 多 验证 。 编写 服务 占 应 用 是 本 书 范围 之 外 的 另 一 个 
领域 ， 因 此 我 们 将 只 关注 浏览 右上 的 验证 和 清理 。 

设置 应 用 的 表单 和 输入 的 验证 时 ， 开 发 人 员 需 要 问 自己 几 个 问题 。 

图 ”应 用 对 数据 的 要 求 是 什么 ? 

图 基于 这 些 约束 ， 如 何 帮 用 户 提 供 有 意义 的 数据 ? 

国 ”是否 有 办 法 消除 用 户 提供 数据 的 不 一 致 性 ? 

自 完 ， 应 该 明确 业务 和 应 用 后 端 ( 如 果 有 的 话 ) 对 数据 的 要 求 是 什么 。 之 所 以 应 该 从 这 里 着 
手 , 是 因为 这 将 帮助 开发 者 建立 处 理 数据 的 基本 的 指导 方针 。 由 于 我 们 已 经 确立 服务 器 会 接受 大 
多 数 东 西 并 且 为 帖子 设 定 了 基本 数据 类 型 ， 因 此 我 们 可 以 继续 下 一 个 问题 。 

根据 当前 约束 , 开发 者 如 何 才能 最 好 地 帮 用 户 提 供 有 意义 的 数据 并 拥有 良好 的 应 用 体验 ”这 
通 名 牵涉 到 检查 数据 的 大 小 、 字 符 类 型 、 上 传 文件 的 文件 类 型 等 。 现 在 ，CreatePost 组 件 相当 不 
销 , 除了 长 度 没 有 什么 需要 验证 的 。 接 下 来 将 检查 最 小 和 最 大 长 度 并 且 只 有 验证 通过 才 让 用 户 提 
交 他 们 的 帖子 。 代 码 清单 5-7 展示 了 如 何 为 组 件 设 置 这 些 基本 验证 。 


代码 清单 5-7 添加 基本 验证 ( src/components/post/Create.js ) 





六 
class CreatePost extends Component 
constryuctor (proBs) 1 
super (props); 


this. state et 在 当前 组 件 的 state 中 创建 
content: , 一 个 简单 的 valid 属性 


valid: false, 
}; 
this.handleSubmit = this.handleSubmit.bindl(this); 
this.handlePostChange = this.handlePostChange.bind(this),; 
} 


handlePostChange (event) 1 


const content = event.target.value; N 
this.setState(() => 1 
sin 通过 设置 最 大 长 度 来 确定 帖 
content, Dp, , 口 
valid: content.length <= 280 了 于 的 有 到 二 (这 里 的 280 
和 是 为 了 演示 ， 用 户 有 时 希望 


}); 帖子 可 以 更 长 一 些 ) 
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} 
handleSubmit() 1 
i1f (Ithis.state=valid) 1{ 
Fetaurns 


} 
const newPost = 1 创建 新 帖子 对 象 


content: this.state.ocontent, 
y? 


console.log(this.state); 


} 


render() { 
return ( 
<div className="create-post"> 
<button onClick={this.handleSubmit}>Post</button> 
<textarea 
value={this.state.content)} 
onChange={this.handlePostChangel} 
placeholder="What's on your mind?" 
/> 
AAVv> 
); 
} 
} 


我 们 已 经 回答 了 前 两 个 问题 (数据 约束 和 验证 )。 现 在 我 们 可 以 着 手 处 理 最 后 一 个 方面 : 通 
过 (非常 ) 基本 的 数据 清理 来 消除 数据 的 不 一 致 。 验 证 是 要 求 用 户 提 供 特 定 的 数据 ， 而 清理 则 是 
确保 获取 的 数据 是 安全 和 格式 正确 的 , 并 且 以 可 持久 化 的 方式 存在 。 信 息 安 全 是 一 个 巨大 而 又 非 
党 重要 的 领域 ， 本 书 无 法 真正 探究 安全 方面 的 数据 人 处理， 但 我 们 可 以 为 Letters 处 理 一 个 较 小 的 
领域 : 冒犯 性 的 内 容 。 

我 们 将 使 用 名 为 bad-words 的 JavaScript 模块 帮助 解决 这 个 问题 , 该 模块 可 以 从 npm 获取 (主要 
的 JavaScript 模块 注册 和 服务 方 )。 它 应 该 已 经 安装 到 项 目 中 了 。bad-words 接收 一 个 字符 串 并 用 星 号 
替换 黑 名 单 上 的 所 有 单词 (如 果 愿 意 ， 开 发 者 可 以 创建 自己 的 黑 名 单 并 替换 默认 的 黑 名 单 )。 代 码 清 
单 5-8 中 的 示例 是 人 为 设计 的 ,但 你 至 少 可 以 防止 人 们 在 公共 应 用 中 发 布 潜在 冒犯 性 的 内 容 。 记 住 ， 
这 是 一 个 精心 设计 的 例子 ， 其 没有 暗示 或 支持 任何 形式 的 审查 。 





代码 清单 5-8 添加 基本 的 内 容 清理 { src/components/post/Create.js ) 


import PropTypes from "Pop-typPes ' ; 
import React from "react's 
加 从 bad-words 模块 导入 默认 对 象 

import Filter from '‘'bad-words'; 
const, filter = new Fliter();» 
| 使 用 构造 函数 创建 过 滤器 实例 
class CreatePost extends Component i 

区 

handlePostChange (eVent) { 
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this.setState(() => { 的 .clean0 方 法 并 用 返 


= fi .Val 7 vs 
const content filter.clean (event.target .value) 将 表单 值 传递 给 filter 
return { 、 
回 值 设置 state 


content, 
valid: content.length <= 280 


export default CreatePost; 


5.3 创建 新 帖子 


现在 对 帖子 做 了 一 些 基本 的 验证 和 清理 , 之 后 则 需要 将 它们 发 送 到 服务 器 来 创建 它们 。 我 们 
将 引入 稍微 复杂 一 点 的 东西 来 实现 这 一 点 ,因此 我 们 将 简要 地 检查 每 个 步骤 ,然后 册 看 看 将 所 有 
步骤 组 合 在 一 起 的 示例 。 

要 将 帖子 发 送 到 API， 除 了 CreatePost 组 件 已 经 做 的 工作 ， 还 需要 做 以 下 工作 ， 包括 跟 踊 状 
态 、 进 行 一 些 基 本 的 验证 和 完成 一 些 基本 的 内 容 清 理工 作 。 

接 下 来 ,需要 完成 下 面 的 工作 才能 将 数据 发 送 给 API。 

(1 ) 捕获 将 要 作为 帖子 的 用 户 输入 ， 更 新 状态 并 执行 之 前 实现 的 数据 检查 逻辑 。 

(2 ) 调用 从 父 组 件 (在 本 例 中 是 主要 App 组 件 ) 作为 属性 传递 过 来 的 事件 处 理 限 数 并 癌 其 
提供 帖子 数据 。 

(3 ) 重 置 CreatePost 组 件 的 状态 。 

(4 ) 在 父 组 件 中 ,使 用 从 CreatePost 子 组 件 传递 过 来 的 数据 来 回 服务 右 发 送 HTTP POST 请 求 。 

(5 ) 使 用 从 服务 句 接 收 的 新 帖子 数据 更 新 本 地 组 件 的 状态 。 

(6 ) 要 更 好 地 了 解 接 下 来 要 做 什么 ， 参 见 图 5-5。 

汪汪 本 全 本 二 


通过 HTTP 将 表单 


API | 
数据 发 送 给 服务 器 a 





| 将 事件 处 理 函数 作为 属性 进行 传递 


| 一 一 onPostSubmit0 { | API 响 应 
| L createPost 组 件 | /1 ... AJAX | 返回 帖子 


| 提交 表单 时 执行 } 
| 
| 








人 Hi state: { 
i 
/更 新 组 件 状态  } 





| 

| \、 
| 

‘ 


5-5 ”CreatePost 组 件 概览 。CreatePost 组 件 接收 一 个 函数 作为 属性 ， 使 用 其 内 部 状态 作为 
该 函数 的 输入 ， 并 在 用 户 点 击 Submit 时 调用 它 。 该 函数 来 自 父 App 组 件 ， 将 数据 发 送 到 
API， 更 新 本 地 帖子 ， 以 及 用 API 返回 数据 进行 帖子 更 新 
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我 们 将 从 添加 一 个 函数 开始 ， 该 函数 将 在 父 组 件 《App.js ) 中 处 理 帖 子 的 提交 。 这 个 函数 有 
好 几 个 部 分 ， 可 以 一 次 添加 一 个 部 分 ,我们 将 逐一 介绍 这 些 部 分 。 代 码 清单 5-9 展示 了 如 何 将 提 
交 帖 子 的 功能 添加 到 App 组 件 中 。 


代码 清单 5-9 ”处理 帖子 提交 ( src/app.js ) 





import * as API from './shared/http'"; 
] 导入 Letters API 模块 
人 
export default class APP extends Component { 
PE 
createNewPost (post) 
this.setState (prevState => 1 
return { 
posts: orderBy (PrevState .Posts .COoncat (newPost), 
'date', 'desc') 
和 合并 新 帖子 并 确 
保 帖 子 已 排序 


} ) 


} 
证 
} 


我 们 已 经 在 父 组 件 中 设置 了 创建 帖子 的 处 理 果 数 , 但 此 时 它 不 会 做 任何 事情 ， 因 为 还 没 什 
么 东西 会 调用 它 。 这 是 因为 需要 将 其 传递 给 子 组 件 (一直 在 处 理 的 CreatePost 组 件 )。 还 记得 如 
何 将 数据 作为 props 从 父 组 件 传递 给 子 组 件 吗 ? 也 可 以 传递 图 数 。 这 一 点 至 关 重 要 ， 因 为 它 允 
许 组 件 协 同 工 作 。 即 使 组 件 可 以 相互 交互 ， 它 们 也 不 会 因为 互相 交织 或 耦合 在 一 起 使 你 无 法 再 
移动 它们 。CreatePost 组 件 可 以 轻松 地 移动 到 应 用 的 其 他 部 分 并 向 其 他 处 理 程序 发 送 相 同 的 数 
据 。 代 码 清单 5-10 展示 了 将 回调 作为 props 传递 的 例子 。 





代码 清单 5-10 ”用 props 传递 回调 函数 ( src/app.js ) 


import CreatePost from './post/Create ' ; 


导入 组 件 以 供 使 用 
export default class APP extends Component { 

gd 

render() { 

return ( 
天 
<CreatePost onSubmit={this.createNewPost} /> 
ya 2 wi 使 用 属性 传递 handlePostSubmit 

) 男 数 


} 
a 
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练习 5-2 受 控 组 件 和 非 受 控 组 件 ， i 
”React 中 受 控 组 件 和 非 受 控 组 件 有 哪些 不 同 之 处 ”是 什么 决定 了 一 个 组 件 是 受 控 的 还 是 非 受 控 的 ? 
至 此 , 已 经 在 父 组 件 中 设置 了 基本 的 事件 处 理 程序 并 将 其 传递 给 子 组 件 , 这 有 助 于 分 离 关 注 
点 一 一 CreatePost 组 件 只 负责 打包 帖子 数据 ， 然 后 将 其 发 送 给 父 组 件 以 执行 它 想 要 的 操作 ， 也 就 
是 ， 将 其 发 送 到 API。 第 6 章 将 介绍 这 些 内 容 。 


9.4 


小 结 


下 面 是 我 们 在 本 草 中 学 到 的 主要 内 容 。 


React 中 的 表单 处 理 与 其 他 组 件 非常 相似 : 可 以 使 用 事件 和 事件 处 理 程序 来 传递 数据 并 提 
区 数据 。 

React 不 提供 任何 “神奇 ”的 方式 来 处 理 表 单 。 表 单 只 是 组 件 。 

表单 验证 和 清理 工作 在 与 事件 、 组 件 更 新 、 重 新 泻 染 、 状 态 和 属性 等 完全 相同 的 React 
思维 模型 中 工作 。 

可 以 在 组 件 之 间 以 属性 的 形式 传递 男 数 ， 这 是 一 种 强大 而 有 用 的 设计 模式 ， 可 以 防止 组 
件 耦 合 、 促 进 组 件 通 信 。 

数据 验证 和 清理 并 不 是 “魔法 ”一 一 React 让 开发 者 可 以 使 用 常规 的 JavaScript 和 库 来 处 
理 数 据 。 


在 第 6 章 中 , 我 们 将 在 本 草 内 容 的 基础 上 继续 进行 构建 并 开始 集成 第 三 方 库 和 React 以 便 问 
应 用 添加 地 图 功能 。 


第 6 章 将 第 三 方 库 与 React 集成 


本 章 主要 内 容 

加 向 远程 API 发送 JSON 格式 的 表单 数据 ， 江 ON 
国 ”构建 一 些 新 类 型 组 件 ， 包 括 位 置 选 择 器 、 和信 生 拓 却 

国 将 React 应 用 与 Mapbox 集成 来 搜索 位 置 和 显示 地 图 


我 们 在 第 5 章 中 已 经 学 习 了 React 中 的 表单 以 及 它 的 工作 方式 ,并 已 添加 事件 处 理 程序 来 更 
新 CreatePost 组 件 的 组 件 状 态 。 在 本 章 中 , 我 们 将 在 之 前 工作 的 基础 上 构建 并 增加 创建 新 帖子 的 
功能 。 我 们 将 更 多 地 与 JSON API 进行 交互 。 上 一 章 中 这 些 API 提供 了 要 演 染 的 帖子 。 

通常 , 我 们 将 在 操作 DOM 的 非 React 类 库 的 上 下 文中 构建 应 用 程序 。 这 些 可 能 包括 jQuery、 
jQuery 插件 ， 其 至 其 他 前 端 框架 。 我 们 已 经 知道 React 为 使 用 者 管理 DOM 而且 它 可 以 简化 开发 
者 思考 用 户 界 面 的 方式 。 不 过 ， 有 时 仍然 需 要 与 DOM 进行 交互 ， 并 日 通常 是 在 使 用 DOM 的 第 
三 方 库 的 上 下 文中 。 随 着 我 们 在 本 章 将 Mapbox 地 图 添加 到 Letters Social 帖子 中 ,我 们 将 探讨 使 
用 React 操作 DOM 的 一 些 方法 。 


如 何 获取 本 章 代码 
。 和 每 章 一 样 ， 读 者 可 以 去 GitHub 仓库 检 出 源 代码 。 如 果 想 从 头 开始 编 写本 章 代码 ， 可 以 使 用 第 4 
章 的 已 有 代码 ( 如 果 跟 着 编写 了 示例 ) 或 直接 检 出 指定 章 的 分 支 ( chapter-5-6)。 
记 住 ,每 个 分 支 对 应 该 章 末 尾 的 代码 ( 例如 ， chapter-5-6 对 应 第 5 章 和 第 6 章 未 尾 的 代码 ) 读者 可 以 在 
选 定 目 录 下 执行 以 下 终端 命令 之 一 来 获取 当 前 章 的 代码 9。 
如 果 还 没有 代码 库 ， 请 输入 下 面 的 命令 来 获取 ， 
giticlone git@ogithuyp: Com ; react-in- action/letters- Soc， git 
如 果 已 经 克隆 过 代码 仓库 
git checkout chapter->-6 
如 果 你 是 从 其 他 章 来 到 这 里 的 ， 则 需要 确保 已 经 安装 了 所 有 正确 的 依赖 . 


npm install 








116 第 6 章 将 第 三 方 库 与 React 集成 


6.1 向 Letters So0cialAPI 发 送 帖子 


回忆 第 2 章 , 我 们 创建 了 一 个 允许 添加 评论 的 评论 框 组 件 。 它 只 在 本 地 内 存 中 保存 这 些 内 
容 ， 页 面 一 刷新 ， 添加 的 任何 评论 就 会 消失 ， 因 为 它们 随 特定 时 间 的 页 面 状 态 而 存亡 。 可 以 选择 
利用 本 地 存储 或 会 话 存储 , 或 者 使 用 其 他 基于 浏览 硕 的 存储 技术 ( 如 cookie、IndexedDB、WebSQL 
等 )。 然 而 ， 这 些 仍 会 将 所 有 东西 存储 在 本 地 。 

如 代码 清单 6-1 所 示 , 我 们 所 要 做 的 是 将 JSON 格式 的 帖子 数据 发 送 给 API 服务 器 。 它 将 处 
理 帖子 的 存储 并 用 新 数据 进行 响应 。 当 克隆 代码 库 时 , 已 经 在 shared/http 文件 夹 中 创建 了 一 些 能 
够 用 于 Letters Social 项 目的 函数 。 我们 使 用 isomorphic-fetch 库 进行 网 络 请 求 , 它 遵 循 浏览 
佛 的 Fetch API， 但 它 的 优点 是 也 可 以 在 服务 需 端 运行 。 





代码 清单 6-1 向 服务 器 发 送 帖 子 ( src/components/app.js ) 


export default class App extends Component { 
¥en 
createNewPost (post) { 
return API.createPost (post) 使 用 Letters API 


.then (res => tes.json()) 创建 帖子 
.then (newPost => 1 
ce { 获取 JSON 响应 


this.setState (prevState => 
更 新 状态 return { 


posts: orderBy (prevState.posts.concat (newPost), 
'date', 'desc') 


确保 使 用 Lodash 的 orderBy 
方法 对 帖子 进行 排序 
} ) 
.Catch (err => { 
this .setState(() => {{ erreors er yi)s = 如 果 有 的 话 ， 设 
和 置 错误 状态 


有 了 它 ， 你 只 要 做 最 后 一 件 事 : 在 子 组 件 中 调用 创建 帖子 的 方法 。 它 已 经 被 传递 给 子 组 件 ， 
因此 只 需 确 保单 击 事件 触发 父 组 件 方法 的 调用 并 且 使 帖子 数据 得 以 传递 。 代码 清单 6-2 展示 了 如 
何在 子 组 件 中 调用 作为 属性 传递 的 方法 。 


代码 清单 6-2 调用 通过 属性 传递 的 函数 





class CreatePost extends Component { 
A 

fetchPosts() {/* created in chapter 4 */} 
handleSubmit (event) { 


event .preventDefault (); 
if (!this.state.valid) { 


阻止 默认 事件 ,创建 一 个 
发 送 给 父 组 件 的 对 象 


} 


6.2 ”用 地 图 增强 组 件 117 


ee 确保 有 可 以 使 用 
} \ 国 
if this props-onSubmit}) { 的 回调 函数 
const newPost = { 


date: Date.now(), 

// Assign a tempopary key to the post; the API will create a real one 
for us 

id: Date.now() ， 

Gontent: thlie. State.Gontent. 


}; 调用 从 父 组 件 通 过 属性 传递 的 onSubmit 
回调 函数 ， 传 人 新 帖子 数据 


this.props.onSubmit (newPost); 
this.setStatel(t 

SONEents 

valide Tindll. 
}); 


将 表单 重 置 为 初始 状态 , 这 样 用 户 
就 有 了 帖子 被 提交 的 提示 





i 


} 


现在 ， 如 果 用 npm run dev 在 开发 模式 下 运行 此 应 用 程序 ， 就 应 该 能 够 添加 帖子 。 它 们 应 
该 立即 出 现在 信息 流 中 ,如 果 刷 新 页 面 ， 仍 然 可 以 看 到 添加 的 帖子 。 它 不 像 其 他 社交 应 用 那样 拥 
有 用 户头 像 或 预览 链接 ， 但 后 续 章 节 会 添加 这 些 功能 。 


6.2 用 地 图 增强 组 件 


现在 已 经 添加 了 创建 帖子 并 将 其 发 送 给 服务 天 的 功能 , 我 们 可 以 继续 稍微 加 强 一 下 它 。Letter Social 
的 虚拟 投资 者 一 直 在 使 用 Facebook 和 Twitter， 他 们 注意 到 这 些 应 用 可 以 让 用 户 给 帖子 添加 位 置 。 他 们 
真 的 很 想 让 Letter Social 应 用 也 拥有 这 个 功能 ， 所 以 你 要 增加 选择 帖子 时 选择 和 展示 位 置 的 功能 。 我 们 
还 要 复 用 地 图 展示 组 件 ， 以 便 用 户 信息 流 中 的 帖子 可 以 显示 位 置 。 图 6-1 展示 了 将 要 构建 的 内 容 。 


What's on your mind? 


Cancel X 
了 Pasadena CA Select 


pm 
ms et City Hall, 100 N Garfield Ave, Pasadena, California 9110... ra 
Pasadena City College, 1570 E Colorado Blvd, Pasadena, California... 

Pasadena, Centerville, Ohio 45429, United States 

Pasadena, dee ee Labrador, Canada 
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(One " > Improve thie map 





图 6-1 将 为 Letters Social 创建 的 内 容 。 将 加 强 当 前 帖子 的 功能 ， 以 便 用 户 可 以 给 
他 们 的 帖子 添加 位 置 。 功 能 添加 完毕 后 就 可 以 在 创建 帖子 时 搜索 和 选择 位 置 
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[ 洁 ] Tionne 0 minutes ago 





Wow React is the coolest thing ever 





4 Santrancisco, California, United States 


O Ov 


图 6-1 将 为 Letters Social 创建 的 内 容 。 将 加 强 当 前 帖子 的 功能 ， 以 便 用 户 可 以 给 
他 们 的 帖子 添加 位 置 。 功 能 添加 完毕 后 就 可 以 在 创建 帖子 时 搜索 和 选择 位 置 ( 续 ) 


从 图 6-1 可 以 看 出 ， 我 们 将 使 用 Mapbox 来 创建 地 图 。Mapbox 是 一 个 地 图 和 地 理 信 息 服 务 
平台 ,其 提供 了 各 种 各 样 的 地 图 和 位 置 相关 服务 。 使 用 者 可 以 使 用 数据 定制 地 图 、 创 建 不 同 风格 
的 地 图 和 图 层 、 搜 索 地 理 图 形 、 添 加 导航 等 。 我 无 法 一 一 说 明 Mapbox 的 所 有 功能 ， 如 果 想 了 解 
更 多 ,请 访问 Mapbox 官方 文档 。 


6.2.1 使 用 refs 创建 DisplayMap 组 件 


当 用 户 为 新 帖子 选择 位 置 以 及 当 帖 子 在 用 户 的 信息 流 中 展示 时 , 需要 一 种 方式 回 用 户 显 示 位 
置 。 我们 将 看 到 如 何 创 建 同 时 满足 这 两 种 目的 的 组 件 ， 以便 可 以 复 用 代码 可 能 并 不 总 是 能 够 做 
到 这 一 点 ， 毕 竞 每 个 需要 地 图 的 地 方 可 能 有 不 同 的 要 求 。 对 于 这 种 情况 ,共享 相同 的 组 件 行 得 通 
而 且 会 减 小 额外 的 工作 。 首先 创建 一 个 名 为 src/components/map/DisplayMap.js 的 新 文件 。 地 图 相 
关 的 两 个 组 件 会 放 在 这 个 目录 中 。 

Mapbox 库 从 哪儿 来 呢 ?” 大 多 数 情 况 下 ， 我 们 使 用 从 npm 安装 的 库 。 下 一 节 将 使 用 Mapbox 
的 npm 模块 ， 但 创建 地 图 将 使 用 不 同 的 库 。 如 果 查 看 源 代码 中 的 HTML 模板 ( src/index.js )， 将 
会 看 到 对 Mapbox 的 JS 库 (mapbox.js ) 的 引用 : 


<script src="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js"></script> 


这 让 React 应 用 能 够 与 Mapbox JS SDK 协同 工作 。 注意 ;Mapbox JS SDK 需要 Mapbox 令 牌 
才能 工作 。 我 已 经 在 Letters Social 应 用 程序 的 源 代码 中 包含 了 一 个 公共 令 牌 , 因此 读者 不 需要 创 
建 Mapbox 账户 。 如 果 已 经 有 账户 或 者 想 自 定义 创建 一 个 账户 来 进行 定制 ， 可 以 通过 更 改 应 用 程 
序 源 代码 的 config 目录 中 的 值 来 添加 令 牌 。 

当 处 理 项 目 或 特性 时 ， 很 多 情况 下 需要 将 React 与 非 React 库 集成 在 一 起 。 开 发 者 可 能 正在 
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使 用 Mapbox 之 类 的 东西 ( 就 像 本 章 所 做 的 那样 )， 它 也 可 能 是 另 一 个 开发 者 在 编写 时 没有 考虑 
使 用 React 的 第 三 方 库 。 考 虑 到 React DOM 管理 DOM 的 方式 , 开发 者 可 能 想 知道 他 能 不 能 这 样 
做 。 好 消息 是 React 提供 了 一 些 不 错 的 应 急 手 段 ， 让 开发 者 使 用 这 些 类 库 成 为 可 能 。 

这 正 是 ref 发 挥 作 用 的 地 方 。 我 在 前 面 的 章节 简要 提 到 过 ref， 它 们 这 里 特别 有 用 。ref 
是 React 为 使 用 者 提供 的 访问 底层 DOM 节点 的 方式 。 虽 然 ref 很 有 用 ， 但 不 应 该 滥用 。 我 们 
仍然 希望 使 用 状态 和 属性 作为 应 用 交互 和 数据 处 理 的 主要 方式 。 当 然 也 有 ref 适用 的 场景 ， 
包括 下 面 几 点 : 


国 ”命令 式 地 触发 动画 ; 

图 与 超出 React 范围 使 用 DOM 的 第 三 方 库 交 互 (我 们 的 例子 )。 

如 何在 React 中 使 用 ref ? 在 以 前 的 版 本 中 ， 会 给 React 元 素 添加 一 个 字符 串 属性 (<div 
ref="myref"></div> )， 但 新 方法 是 使 用 内 联 回调 ， 如 下 所 示 : 


<div ref={ref => { this.MyNode = ref; } }></div> 


如 果 想 引用 底层 DOM 元 素 ， 可 以 从 类 中 引用 它 。 我 们 可 以 在 ref 的 回调 函数 中 与 其 交互 ， 
但 大 多 时 候 布 望 将 对 DOM 元 素 的 引用 存储 在 组 件 类 中 ， 以 便 在 其 他 地 方 可 以 使 用 它 。 

应 该 注意 几 件 事 。 不 能 从 外 部 在 无 状态 函数 组 件 上 使 用 ref， 因 为 这 类 组 件 没 有 支撑 实例 。 
例如 ， 下 面 这 种 方式 是 行 不 通 的 : 


<ACoolFunctionalComponent ref={ref => { this.ref = ref; } } /> 


但 如 果 组 件 是 一 个 类 ， 可 以 得 到 组 件 的 引用 ， 因 为 组 件 拥有 支撑 实例 。 还 可 以 将 ref 作为 属 
性 传递 给 使 用 它们 的 组 件 。 大 多 情况 下 ， 仅 当 需 要 直接 访问 DOM 节点 时 才 使 用 ref， 所 以 这 种 
用 例 场景 可 能 并 不 和 常见， 除非 正在 构建 需要 使 用 ref 的 库 。 

我 们 将 使 用 ref 与 Mapbox JavaScript SDK 交互 。Mapbox 库 负 责 创 建 地 图 并 在 地 图 上 设置 很 
多 东西 , 如 事件 处 理 程序 、UI 控件 等 。 它 的 地 图 API 需要 使 用 DOM 元 素 的 引用 或 用 来 搜索 DOM 
的 ID。 代 码 清单 6-3 展示 了 DisplayMap 组 件 的 框架 。 





代码 清单 6-3 ”给 地 图 组 件 添 加 ref ( src/components/map/DisplayMap.js ) 


import React, { Component } from "Teact ' ; 
import PropTypes from "Brop-types’”}? 


export default class DisplayMap extends Component { 


render() { 
return | ] 从 render 中 返回 元 素数 组 
<div key="displayMap" className="displayMap"> 
<div 
ee Mapbox 用 来 创建 地 图 
ref={node => a 
this.mapNode = node; 的 DOM 元 系 


} } 
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</div> 
</div> 
Ts 


} 


这 是 地 图 与 React 协同 的 良好 开端 。 接 下 来 需要 使 用 Mapbox JS API 来 创建 地 图 。 我 们 将 创 
建 一 个 方法 ， 该 方法 会 使 用 存储 在 类 上 的 ref。 我 们 还 需要 设置 一 些 上 默认 属性 和 状态 来 让 地 图 有 
默认 区 域 定 位 ,而 不 是 一 上 来 就 显示 整个 世界 地 图 。 我 们 将 在 组 件 中 记录 一 些 状 态 , 包括 地 图 是 
否 已 加 载 以 及 一 些 位 置信 息 ( 纬度 、 经 度 和 地 名 )。 注 意 ， 通 过 React 与 男 一 个 JavaScript 库 交 互 
是 非常 简单 的 事 。 让 这 些 库 一 起 工作 也 很 容易 实现 ， 最 难 的 部 分 是 使 用 ref。 代 码 清 单 6-4 展示 
了 如 何 设 置 DisplayMap 组 件 。 





代码 清单 6-4 ”使 用 Mapbox 创建 地 图 ( src/components/map/DisplayMap.js ) 


import React, 1{ Component } from ‘react'",; 
import PropTypes from ‘prop-types'; 


export default class DisplayMap extends Component { 
Cornistractor (Brops) | 
super (props); 
this.state = { 


Weapon false., 设置 初始 状态 
lovatiodris 其 


+ 


E 


lats: propselocation. at., 
ng: DECOBSs locatlion, 1ng; 
name: props.location.name 
} 
}; 


this.ensureMapExists = this.ensureMapExists.bind(this); 
} 
0 ~ . 
static propTypes = { 绑 定 ensureMapExists 
location: PropTypes .shape lt 类 方法 


lat: PropTypes.number, 
lng: PropTypes.number, 
name: PropTypes.string 
}) 
displayOnly: PropTypes.bool 
}; 
static defaultProps = { 
displayOnly: true, 
Jocatliorn 1 
lats 34.153564], 
lng: -L1822l1D: 
name: null 
} 
}; 


componentDidMount () { 
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this.L = window.L; 


if (this.state.location.lng && this.state.location.lat) 1{ Mapbox 使 用 一 

this .ensureMapExists() ， i 个 名 为 Leaflet 的 

} 言 息 ， 如 果 有 ， 设 置地 图 
ensureMapExists() { 


if (this.state.mapLoaded) return; 
this.map = this.L.mapbox.map (this.mapNode, ‘'mapbox.streets', 
zoomControl: false, 
scrollWheelZoom: false 
} ) ; 
this.map.setView(this.L.latLng (this.state.location.lat, 
this. state. location. Lng), 412)» 


this.setState(() => ({ mapLoaded: true }));，; 
} 
render() 1 和 用 组 件 接收 到 的 
return [ 
<div key="displayMap" className="displayMap"> 纬度 和 经 度 设置 
<div 地 图 视图 
ee 全 用 Mapbox 创建 新 地 图 并 在 
this.mapNode = node; 组 件 上 存储 对 它 的 引用 《〈 茶 用 
} } 不 需要 的 地 图 特性 ) 
> 
Vt 如 果 已 经 加 载 了 地 图 ， 
Se 确保 不 会 意外 地 重新 
} 创建 地 图 


} 


组 件 现在 应 该 很 好 地 展示 了 一 个 仅 用 于 展示 的 地 图 。 但 记 住 ， 我 们 要 创建 的 map 组 件 可 以 
在 用 户 选 择 新 位 置 时 为 其 指明 特定 位 置 并 进行 更 新 。 我 们 需要 做 更 多 工作 来 实现 这 些 功 能 : 添加 
方法 用 于 向 地 图 新 增 标 记 、 更 新 地 图 位 置 以 及 确保 正确 更 新 地 图 。 代 码 清单 6-5 展示 了 如 何 将 这 
些 方法 添加 到 组 件 中 。 


代码 清单 6-5 ”动态 地 图 ( src/components/map/DisplayMap.is ) 





import React, { Comporent } from "react'; 
import PropTypes from ‘prop-types'; 


export default class DisplayMap extends Component 
COnNstructor (props) 1 
super (props); 
this.state = { 
mapLoaded: false, 
location; 1 
lats: props. Location.dat, 
Ing: DEOBS. Locatlion.Lng, 
name: props.location.name 
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this.ensureMapExists = this.ensureMapExists.bindl(this); 绑 定 类 方法 
this.updateMapPosition = this.updateMapPosition.bind(this); 


} 


Re 

componentDidUpdate() { 告诉 Mapbox 使 地 图 尺寸 失 
if (this .map && ‘this.props.displayonly) 1 效 ， 防 止 隐藏 /显示 地 图 时 

this.map.invalidateSize (false); 显示 不 正确 

} 

ponentWillReceiveProps (nextProps) { 当 显示 位 置 发 生变 化 时 ， 需 

m ce 工 nex 3 
要 进行 相应 的 啊 应 


if (nextProps. location) + 
const locationsAreEqual = Object.keys (nextProps.location) .every ( 


k => nextProps.location[k] === this.props.location[k] 
) ; 
if (!locationsAreEqual) ({ 

this.updateMapPosition (nextProps.location); 


} 
} 如 果 接 收 到 位 置 , 检查 当前 位 置 和 之 前 的 位 
有 置 是 否 相 同 ， 如 果 不 同 ， 需 要 更 新 地 图 
ensureMapExists() { 
if (this.state.mapLoaded) return; 
this.map = this.L.mapbox.map (this.mapNode, ‘mapbox.streets', 
ZzoomControl: false, 
scrollWheelZoom: false 当地 图 第 一 
})2 
this.map.setView(this.L.1latLng (this.state.location.lat, 次 创建 时 添 
this. atate. JOation. ng), 12): 加 一 个 标记 
this.addMarker (this.state.location.lat, this.state.location.1lng); 
this.setState(() => ({ mapLoaded: true })); 
} 


updateMapPosition(location) 1{ 
GONSLE { lat, 1ng +} = ,JocGatien: 相应 地 更 新 地 图 
this.map.setView (this.L.latLng (lat, lng)); 视图 和 组 件 状 态 
this.addMarker (lat, lng); 
this. setSstate((} es (人 locatilorn }))s? 
} 
addMarker (lat, lng) { 
if (this.marker) 1{ 
return this.marker.setLatLng (this.L.latLng(lat, lng)); 更 新 现 有 的 标 
} » oy 
记 , 而 不 是 每 次 
this.marker = this.L.marker([lat, lng], 1 reas 
icon: this.L.mapbox.nmarker.icon!l' 
'marker-color': '#4469af' 创建 一 个 标记 并 将 
}) 其 添加 到 地 图 中 


> 
this.marker.addTo (this.map); 
} NN 
render() { 
return [ 
<div key="displayMap" className="displayMap"> 
<diy 
className="map" 
ref={node => { 
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this.mapNode = node; 


| 
> 


«</div> 
</div> 


} 


当 回 组 件 中 添加 方法 时 可 能 注意 到 这 里 的 一 个 模式 : 用 第 三 方 库 做 一 些 事 ,将 做 事 的 方式 教授 
给 React， 重 复 。 根 据 我 的 经 验 ， 这 通常 就 是 与 第 三 方 库 集成 的 方式 。 开 发 者 想 找到 一 个 集成 点 , 在 
这 里 可 以 从 库 中 获取 数据 或 者 使 用 库 API 来 告诉 它 去 做 一 些 事情 一 一 但 这 些 都 发 生 在 React 中 。 很 
多 情况 下 这 可 能 非常 困难 ， 但 依 我 之 见 ， 把 React 的 ref 与 常规 JavaScript 互 操作 性 结合 起 来 使 得 使 
用 非 React 库 不 再 如 其 他 情况 那么 糟糕 (希望 在 未 来 的 React 应 用 程序 你 也 能 找到 相同 的 感觉 )。 

至 少 还 可 以 对 组 件 进行 一 项 改进 。Mapbox 允许 根据 地 理 信息 生成 静态 的 地 图 图 像 。 这 对 于 
不 想 加 载 交 互 式 地 图 的 情况 非常 有 用 。 我 们 将 添加 此 功能 作为 备用 , 这 样 用 户 就 可 以 立即 看 到 地 
图 。 这 个 改进 在 第 12 草 中 做 服务 需 端 泻 染 时 会 很 有 有 用。 服务 需 将 生成 不 调用 任何 装载 相关 方法 
的 标记 ， 因 此 用 户 在 应 用 完全 加 载 前 仍 能 看 到 帖子 的 位 置 。 

为 了 地 图 能 够 在 纯 展 示 模 式 下 显示 其 位 置 名 称 ， 还 需要 给 地 图 组 件 添加 一 个 小 UI。 前 面 已 
提 到 ,最 好 给 主 元 素 添 加 一 个 兄弟 元 素 , 这 就 是 我 们 要 返回 元 素数 组 的 原因 。 这 就 是 添加 这 个 小 
标记 的 地 方 。 代 码 清单 6-6 展示 了 如 何 回 组 件 添 加 备用 图 以 及 位 置 名 称 展示 。 





代码 清单 6-6 ”添加 备用 地 图 图 像 ( src/components/map/DisplayMap.js ) 


import React, { Component } from "Teact ' ， 
import PropTypes from 'prop-types'; 


export default class DisplayMap extends Component 
econstructor(Drops) | 
super (Props) ; 
this.state = { 
mapLoaded: false, 
Docation: 1 
lat: Breops .Location.lat, 
rng: PEOBS: Location. Lng,;, 
name: props.location.name 
} 
， 
this.ensureMapExists = this.ensureMapExists.bindl(this),; 
A this.updateMapPosition = this.updateMapPosition.bind(this),; 
部 定 关 -> this.generateStaticMapImage = this.generateStaticMapImage.bind(this); 
} 


方法 
es 
generateStaticMapImage (lat, lng) 1{ 使 用 纬度 和 经 
return ‘https://api.mapbox.com/styles/vl/mapbox/streetsv10/ 度 从 Mapbox 
static/${lat},${lng},12,0,0/600x175?access token=$ {process 生成 图 像 URL 


‘env .MAPBOX API_ TOKEN}.; 
} 
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render() { 
return [ 
<div key="displayMap" className="displayMap"> 
<div 
className="map" 
ref={node => 1 
this.mapNode = node; 
}} 
> = py 
{!'this.state.mapLoaded && ( a 显示 位 置 图 片 
<img 
className="map" 
src={this.generateStaticMaplImage\( 
this state. Locatlorns Lat, 
this.state.location.lng 
时 
alt={this.state.location.namel} 
/3 
) } 
> 
</div>, 
this.props.displayOnly && ( 
<div key="location-description" className="]ocation 
description"> 
<i className="location-icon fa fa-location-arrow" /> 
<span className="]ocation-~ 
name">{this.state.location.name}</span> 
ee 如 果 处 于 纯 显示 模式 ， 则 展示 位 
1 ， 置 名 称 和 指示 器 


6.2.2 创建 LocationTypeAhead 组 件 


虽然 可 以 在 应 用 中 显示 地 图 , 但 尚 不 能 创建 它们 。 要 支持 该 特性 , 就 需要 构建 男 一 个 组 件 一 一 
位 置 预 输 入 。 下 一 节 将 在 CreatePost 组 件 中 使 用 这 个 组 件 让 用 户 搜 索 位 置 。 这 个 组 件 将 使 用 浏览 回 
的 Geolocation API 及 Mapbox API 来 搜索 位 置 。 

创建 另 一 个 文件 src/components/map/LocationTypeAhead.js 开始 工作 。 图 6-2 显示 了 本 节 将 创 
建 的 预 输入 组 件 。 

下 面 是 该 组 件 完成 时 具有 的 基本 功能 : 

国 显示 位 置 列表 供用 户 选择 ; 

国 将 选 定 的 位 置 交 给 父 组 件 使 用 ; 

图 使 用 Mapbox 和 Geolocation API 让 用 户 选 择 他 们 当前 的 位 置 或 通过 地 址 进行 搜索 。 

接 下 来 ,我 们 将 开始 创建 组 件 杠 以。 代码 清单 6-7 展示 了 其 初稿 。 我 们 将 再 次 使 用 Mapbox， 
但 这 次 使 用 的 是 另 一 组 不 同 的 API。 上 一 节 使 用 了 地 图 展示 API, 但 这 里 将 使 用 的 这 组 API 允许 
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用 户 进 行 反 向 地 理 编码 一 一 这 是 “通过 文本 搜索 实际 位 置 ”的 时 比 说 法 ,项 目 已 经 安装 了 Mapbox 
模块 并 将 使 用 相同 的 公共 Mapbox 键 来 工作 。 如 果 之 前 已 经 添加 了 自己 的 API 键 , 应 用 程序 配置 
在 这 里 应 该 使 用 相同 的 键 。 


What's on your mind? 


core 


了 Pasadena, CA Select 


Pasadena, California, United States 
Pasadena City Hall, 100 N Garfield Ave, Pasadena, California 9110... 
Pasadena City College, 1570 E Colorado Blvd, Pasadena, California… 
Pasadena, Centerville, Ohio 45429, United States 区 
Pasadena, Newfoundland SG Labrador, Canada 





SR Fw 时 -和 

i i rr < 二 全 人 » 
四 和 Arcadi 
(Sma ; Sz : SS UBSNB Loetiap Improve thie mep 





代码 清单 6-7 ”初始 的 LocationTypeAhead 组 件 


import React, { Component } from ‘react'; 
import PropTypes from ‘prop-types'; Na 导入 Mapbox 
import MapBox from 'mapbox'; 
export default class LocationTypeAhead extends Component { 
static propTypes = 1 
onLocationUpdate: PropTypes.func.isRequired, 


个 A 
onLocationSelect: PropTypes.func.isRequired 有 过 句 两 方法 ， 
Fy 用 于 位 置 更 新 ， 男 一 
constructor (props) { 个 用 于 位 置 选择 


super (props),; 
this.state = 1 


te ] 设置 初始 状态 

lOcatronss |] 

selectedLocation: null 创建 一 个 Mapbox 
) 客户 端 实例 


this.mapbox = new MapBox (process.env.MAPBOX API TOKEN); 
} 


render() 1 
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return |[ 
<div key="location-typeahead" className="location-typeahead"> 
<i className="fa fa-location-arrow" 
onClick={this.attemptGeoLocation} /> 

<input 
onChange={this.handleSearchChange} 
type="text" 
placeholder="Enter a Location . . .” 
value={this.state.text} 

/> 

<button 
disabled={!this.state.selectedLocation)} 
onClick={this.handleSelectLocation} 


nal 返回 由 预 输入 组 件 的 标记 所 组 成 的 元 素 
Select 数组 。 需 要 实现 所 有 事件 处 理 程 序 所 引 


</button> 用 的 方法 (onChange、onClick 等 ) 
</div> 


> 


] :> 


} 

现在 ,可 以 开始 填写 组 件 的 render 方法 中 引用 的 方法 。 注意 , 需要 一 个 处 理 搜索 文本 变更 
的 方法 、 一 个 允许 用 户 选 择 位 置 的 按钮 和 一 个 让 用 户 选择 当前 位 置 的 图 标 。 接 下 来 我 将 介绍 这 个 
功能 ; 现在 ， 需 要 一 些 方法 来 让 用 户 使 用 文本 搜索 位 置 以 及 选择 位 置 。 代 码 清单 6-8 展示 了 如 何 
添加 这 些 方法 。 这 些 地 点 从 哪儿 来 呢 ? 我 们 将 根据 用 户 类 型 使 用 Mapbox API 搜索 位 置 并 用 这 些 
结果 来 显示 地 址 。 这 只 是 Mapbox 的 一 种 用 法 。 也 可 以 反 着 做 一 一 输入 坐标 并 将 其 转换 为 地 址 。 
代码 清单 6-9 将 使 用 Geolocation API 来 实现 这 个 功能 。 





代码 清单 6-8 搜索 位 置 ( src/components/map/LocationTypeAhead.js ) 


a 
CoOrnstructor (BESBSY + 
super (props); 
this.state = { 
texts TL, 
locataonss [|]; 
selectedLocation: null 
}; 
this.mapbox = new MapBox (process.env.MAPBOX API TOKEN); 
this.handleLocationUpdate = this.handleLocationUpdate.bind (this); 
this.handleSearchChange = this.handleSearchChange.bind (this); 绑 定 类 
this.handleSelectLocation = this.handleSelectLocation.bind(this); | 方法 
this.resetSearch = this.resetSearch.pina(this) ， 
} 


componentWillUnmount() { 


this.resetSearch () ; 组 件 跟 载 时 , 重 置 
} 搜索 


handleLocationUpdate(location) { 


this. setState (() => { 
return 1 选中 一 个 位 置 时 ,更 
text: location.name, 新 本 地 组 件 状态 
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locations: []， 
selectedLocation: location 


二 


}) ; 同时 ,通过 属性 回调 
this.props.onLocationUpdate (location); 将 位 置 传 给 父 组 件 
} 
handleSearchChange (e) { \ 
const text = e.target.value; 当 用 户 在 搜索 框 中 输入 文本 时 ， 
this.setStatel() => ({ text })); 从 接收 的 事件 中 提取 文本 
i£€f (ItEexty return; 
this.mapbox.geocodeForward (text, {}) .then(loc => { 
If (!loc.entity.features || !loc.entity.features.length) { 
returny ee 
} ] 如 果 没 有 结果 就 什么 也 不 做 
const locations = loc.entity.features.map (feature => { 
const [lng, lat] = feature.center; 
return { 
name: feature.place name, 将 Mapbox 的 结果 转换 为 在 
I 组 件 中 更 容易 使 用 的 格式 
el 人 
严 Y -大 < SN 
this.setState(() => ({ locations )}) )， 地 组 件 状态 通过 Mapbox 
上 客户 问 使 用 
} 用 户 输入 的 
resetSearch() { 文本 来 搜索 
this.setState(() => { 允许 重 置 组 件 状态 (查看 位 轩 
return { componentWillUnmount ) 
Eexts 7”. 
IOeatlons: [1 
selectedLocation: null 
}; 
ee 当选 中 了 位 置 时 , 将 当前 
handleSelectLocation() 1{ 选中 的 位 置 向 上 传递 
this.props.onLocationSelect (this.state.selectedLocation); 


} 
Es 


接 下 来 , 我 们 想 让 用 户 为 帖子 选择 他 们 的 当前 位 置 。 为 此 , 我 们 将 使 用 到 浏览 器 的 Geolocation 
API。 如 果 之 前 没有 用 过 Geolocation API 也 没关系 。 它 在 很 长 一 段 时 间 里 一 直 是 一 个 前 沿 特性 ， 
只 能 在 某 些 浏览 硕 上 使 用 。 现 在 ， 它 已 经 获得 了 广泛 的 应 用 并 且 用 途 更 多 。 

Geolocation API 所 做 的 事情 基本 上 是 : 询问 用 户 是 否 可 以 在 应 用 中 使 用 他 们 的 位 置 。 目 前 几 
乎 所 有 浏览 器 都 文 持 Geolocation API, 所 以 我 们 可 以 利用 它 来 让 用 户 为 帖子 选择 当前 位 置 。 注 意 ， 
Geolocation API 只 能 在 安全 的 上 下 文中 使 用 ， 因 此 ， 如 果 将 Letters Social 部 署 到 不 安全 的 主机 上 ， 
它 就 无 法 工作 。 

我 们 需要 再 次 使 用 Mapbox API， 因 为 Geolocation API 返回 的 只 是 坐标 。 还 记得 如 何 使 用 用 户 
输入 的 文本 在 Mapbox 中 搜索 位 置 吗 ? 我 们 可 以 反 过 来 做 :加 Mapbox 提供 坐标 并 获取 匹配 的 地 址 。 
代码 清单 6-9 展示 了 如 何 使 用 Geolocation API 和 Mapbox API 让 用 户 为 帖子 选择 他 们 的 当前 位 置 。 
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代码 清单 6-9 添加 Geolocation ( src/components/map/LocationTypeAhead.js ) 


CONStreuctor (DropSs) 1 
super (props); 
this.state = 1 


和 
locationss: |]; 
selectedLocation: null 绑 定 类 方法 


}; 

this.mapbox = new MapBox (process.env.MAPBOX API_ TOKEN); 
this.attemptGeoLocation = this.attemptGeoLocation.bind (this) ; 
this.handleLocationUpdate = this.handleLocationUpdate.bind(this); 
this.handleSearchChange = this.handleSearchChange.bind (this); 
this.handleSelectLocation = this.handleSelectLocation.bind(this); 
this.resetSearch = this.resetSearch.bindl(this); 


} 


si 检测 浏览 硕 是 否 
attemptGeoLocation() { 文 持 geolocation 
if ('geolocation' in navigator) { RE 
获取 用 户 naVigator.geolocation.getCurrentPosition (人 这 将 返回 可 以 
设备 的 当 ({ eoords 1}) => 1 使 用 的 坐标 
ye const latitude, longitude = Coords; 
前 位 置 | 


this.mapbox.geocodeReverse({ latitude, longitude }, 
{}) .then(loc => { 


使 用 Mapbox 对 坐标 进行 地 理 编码 ， 


i (tloc.entity,.features || 


I!loc.entity.features.length) { 如 果 什 么 也 没有 找到 就 尽早 返回 
return; 

经 } i 
te const feature = loc.entity.features[0]; ee 
const [lng, lat] = feature.cCenter; 地 点 

Const currentLocation = { 
name: feature.place name, 

创建 要 使 用 a 

的 位 置 傈 载 lng 

并 用 其 更 新 }; 

组 件 状态 this.setState(() => (1 

locations: [currentLocation], 


selectedLocation: currentLocation, 
text: currentLocation.name 

站 

this.handleLocationUpdate (currentLocation); 


和 


} ， 轩 使 用 新 位 置信 息 调 用 
汪 / handleLocationUpdate 属性 
enableHighAccuracy: 七 Tue， 传递 给 Geolocation API 


timeout: 5000 ， 
maximumAge: 0 


的 选项 
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组 件 能 够 用 Mapbox 搜索 位 置 并 让 用 户 通 过 Geolocation API 选择 他 们 自己 的 位 置 。 但 它 还 没 
有 回 用户 展 示 任 何 东西 ， 接 下 来 我 们 会 完善 它 。 如 代码 清单 6-10 所 示 ， 需 要 使 用 检索 的 位 置 结 
果 以 便 用 户 能 够 通过 点 击 选择 一 个 位 置 。 


代码 清单 6-10 ”向 用 户 展示 检索 结果 ( src/components/map/LocationTypeAhead.js ) 





和 
render() |{ 
return [ 
<div key="location-typeahead" className="location-typeahead"> 


<i className="fa fa-location-arrow" 
onClick={this.attemptGeoLocation} /> 


<input 
onChange={this.handleSearchChange)} 
type="text" 


placeholder="Enter a location..." 
Value={this.state .text |} 


#S 
<button 
”disabled={!this.state.selectedLocation)} 
onClick={this.handleSelectLocation)} 
className="open" 
> 
Select 如 果 有 搜索 查询 并 且 有 匹 
Ne 配 结果 ， 那 么 就 显示 结果 
</div>, 


this.state.text.length && this.state.locations.length ? ( 
<div key="location-typeahead-results" 
className="location-typeahead-results"> 
{this.state.locations.map (location => 1{ 
return ( 


<div 遍历 从 Mapbox 中 
如 果 用 户 点 击 一 个 onClick={e => 1 返回 的 位 置 
位 置 ， 则 设置 该 位 e.preventDefault ();，; 
置 为 选中 位 置 this.handleLocationUpdate (location);} 
a 
、 className="result" 不 要 忘记 给 迭代 
{location.name)} 组 件 指定 Key 
村 </div> 显示 位 
置 名 称 


3 
</div> 


) eh 
] ; | 
ye. 询 ， 不 要 做 任何 事情 
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6.2.3 更 新 CreatePost， 给 帖子 添加 地 图 


现在 已 经 创建 了 LocationTypeAhead 和 DisplayMap 组 件 ， 可 以 将 这 些 组 件 集成 到 CreatePost 
组 件 中 了 。 这 将 把 已 创建 的 功能 结合 起 来 并 允许 用 户 创建 具有 位 置 的 帖子 。 记 得 CreatePost 组 件 
是 如 何 将 数据 回 传 给 父 组 件 来 执行 实际 的 帖子 创建 吗 ? LocationTypeAhead 和 DisplayMap 组 件 将 
做 同样 的 事情 , 但 是 是 在 CreatePost 组 件 中 。 它 们 将 协同 工作 , 但 不 会 绑 得 过 于 紧密 以 至 于 无 法 
移动 它们 或 在 其 他 地 方 使 用 它们 。 

需要 更 新 CreatePost 组 件 来 使 用 之 前 创建 的 LocationTypeAhead 和 DisplayMap 组 件 , 这 两 个 
组 件 分 别 用 来 生成 和 接收 位 置 。 在 CreatePost 组 件 中 将 跟 躁 位置 并 使 用 最 近 创 建 的 两 个 组 件 作 为 
位 置 数据 的 源 和 目的 。 代 码 清单 6-11 展示 了 癌 帖 子 添加 位 置 所 需 的 方法 。 





代码 清单 6-11 在 CreatePost 组 件 中 处 理 位 置 ( src/components/post/Create.js ) 


CoOnstructor (BIOBS) 1 
super (props); 
this.initialState = { 
Conterits ™"”, 
valid: false, 
showLocationPicker: false, 
ocations 4 


lat: 34.1535641, 在 state 中 涂 加 键 ， 以 使 能 
lng: -118.1428115， 够 跟踪 位 置 和 相关 数据 , 设 
name: null 置 一 些 默认 的 位 置 数据 


} ， 


locationSelected: false 


this. .state = this. 1nitialSstate? 
this.filter = new Filter(); he 
this.handlePostChange = this.handlePostChange.bind (this); 
this.handleRemoveLocation = this.handleRemoveLocation.bindl(this); 
绑 定 类 this.handleSubmit = this.handleSubmit .bind(this) ; 
方法 this.handleToggleLocation = this.handleToggleLocation.bindl(this); 
this.onLocationSelect = this.onLocationSelect .bind(this); 
this.onLocationUpdate = this.onLocationUpdate.bind (this),; 
} 


i , 
handleRemoveLocation() { 允许 用 户 从 他 们 的 帖 
this.setState(() => (I{ 子 中 删除 位 置 
locationSelected: false, 
location: this. TinitialState. location 
$F 
} 
handleSubmit() 1{ 
if (!'this.state.valid) 1 
return; 
} 
Const newPost = { 
content: this.state.content 提交 帖子 时 ， 如 果 存 在 位 置 
if (this.state.locationSelected) 1 县 就 添加 到 帖子 的 何 载 中 
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newPost.location = this.state.location; 
} 
this.props.onSubmit (newPost); 
this.setState(() => ({ 
Gontents ™ 
valid: false, 
showLocationPicker: false, 
location: this.initialgState.,. location, 
locationSelected: false 
时， 
} 
onLocationUpdate(location) { 


this.setState(()y => ({ "location })): 
处 理 来 自 LocationTypeAhead 


组 件 的 位 置 更 新 


} 
onLocationSelect (location) 
this.setState(() => (1 
location, 
ShowLocationPicker: false, 
locationSelected: true 
3 
) i 切换 显示 位 置 选择 器 
handleToggléEocation(e) { 
e.preventDefault ()，} 
this.setState(state => ({ showLocationpicker: 
I!state.showLocationpPpicker }));} 
} 
Ln 


CreatePost 组 件 现 在 可 以 处 理 位 置 了 , 我 们 需要 添加 UI 使 之 实现 , 一旦 加 入 添加 位 置 的 相关 
UI, 你 会 发 现 render 方法 变 得 有 点 儿 混 乱 。 这 并 不 一 定 是 件 坏 事 , 组 件 标 记 还 没有 复杂 到 需要 
重 构 的 地 步 ( 我 曾经 处 理 过 长 达 几 百 行 的 render 方法 ), 但 这 是 探索 React 组 件 中 不 同 的 泻 染 
技术 的 好 机 会 一 一 我 称 之 为 子 演 染 。 


练习 6-2 使 用 ref 的 其 他 情况 = 
我 们 在 本 章 花 了 些 时 间 探讨 






es 帮 
你 过 去 参 : 与 过 需要 集成 使 用 ref 的 React 项 目 下 


子 演 染 方法 就 是 将 render 方法 的 一 部 分 拆 解 为 组 件 上 的 类 方法 ( (或 者 其 他 地 方 的 函数 ) 
然后 在 主 render 方法 的 JSX 表达 式 中 调用 它 。 如 果 需 要 分 解 较 大 的 render 方法 、 需 要 为 UI 
的 特定 部 分 隅 离 逻辑 或 其 他 原因 ,就 可 以 使 用 此 技术 。 有 可 能 会 找到 子 泻 染 方法 的 其 他 有 用 的 场 
景 ， 但 关键 在 于 可 以 将 render 分 解 为 多 个 部 分 ， 而 这 些 部 分 无 须 成 为 组 件 。 代 码 清单 6-12 说 
明了 将 render 方法 拆 解 成 更 小 的 部 分 。 


代码 清单 6-12 ”添加 子 泻 染 方 法 ( src/components/post/Create.js ) 








constructor (props) 1 在 构造 函数 中 绑 定 类 方法 
a 
this.,.renderLocationControls = this,.renderLocationControls.bindl(this); 


} 
renderLocationControls() i 
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return ( 如 果 选 中 一 个 位 置 ， 显 示 一 
<div className="controls"> 个 让 用 户 删 除 其 位 置 的 按钮 


<button onClick={this.handleSubmit}>Post</button> 
{this.state.location && this.state.locationSelected ? ( 
<button onClick={this.handleRemoveLocation} 


className="open location-indicator"> 绑 定 removeLocation 
<i className="fa-location-arrow fa" /> 方法 并 显示 当前 位 置 
<small>{this.state.location.name}</small> 
</button> 1 显示 切换 位 置 选 
站 
<button onClick={this.handleToggleLocation)} 择 天 组 件 的 按钮 
className="open"> 
{this.state.showLocationPicker ? 'Cancel' :; iaAdqd 
location’'}{' + } 
六 
className={classnames( fa , 
'fa-map-o': !this.state.showLocationPicker, 
'fa-times': this.state.showLocationPicker 
2 正确 显示 文本 并 根据 位 置 状态 使 用 正确 的 绑 定 方法 
</button> 
) } 
<*/diyvs 
); 
} 
render() { 
return ( 
<div className="create-post"> 
<textarea 
value={this.state.content} 
onChange={this.handlePostChange)} 
placeholder="What's on your mind?" 区 
a 染 方法 
{this.renderLocationControls()} 
<div 
className="location-picker" 
style={{ display: this.state.showLocationPicker ? 'block' 
ba 根据 状态 显示 或 隐 
如 果 没 有 选择 位 置 ， 则 {!this.state.locationSelected && [ 藏 位 置 选择 器 组 件 
显示 位 置 选择 器 组 件 <LocationTypeAhead 


key="LocationTypeAhead" 
onLocationSelect={this.onLocationSelect} 
onLocationUpdate={this.onLocationUpdate)} 


/3 
<DisplayMap 
key="DisplayMap" 
displayOnly={false)} \ 
location={this.state.location} 
onLocationSelect={this.onLocationSelect)} 
onLocationUpdate={this.onLocationUpdate)} 
A 


了 学 
</div> 


6.2 用 地 图 增强 组 件 133 


</div> 
) 
} 


最 后 ， 需 要 给 有 位 置 的 帖子 添加 地 图 。 之 前 已 经 完成 DisplayMap 组 件 的 构建 并 且 确 保 其 能 
在 纯 显 示 模 式 下 工作 , 因此 需要 做 的 是 将 它 包 含 到 Post 组 件 中 。 代码 清单 6-13 展示 了 要 怎么 做 。 





代码 清单 6-13 ”给 帖子 添加 地 图 ( src/components/post/Post.js ) 


import React, { Component } from '‘'react'; 
import PropTypes from ‘prop-types'; 


import * Bs APL freom s/s/ahared/http":; 

import Content from "“,/Content'; 

import Image from './Image'; 

import Link £86m ' /Link'y 

import PostActionSection from './PostActionSection'; 


import Comments from '../comment/Comments'; 

import DisplayMap from '../map/DisplayMap'; 导入 DisplayMap 
import UserHeader from '../post/UserHeader'; es 
import Loader from '../Loader'; i a 


export class Post extends Component { 
static propTypes = { 
post: PropTypes.object 
}; 
i 
render() 1 
if {lthhis,. State. post) + 
return <Loader />; 
} 
return ( 
<div className="post"> 
<UserHeader date={this.state.post.date} 
user={this.state.post.user} /> 
<Content post={this.state.post} /> 


<Image post={this.state.post} /> 如 果 帖 子 有 与 之 关联 的 
<Link link={this.state.post.link} /> 位 置 ， 显 示 位 置 并 启用 
{this.state.post.location && <DisplayMap displayOnly 模式 


location={this.state.post.location} />} 

<PostActionSection showComments={this.state.showComments} /> 

<Comments 
comments={this.state.comments} 
show={this.state.showComments} 
post={this.state.post)} 
handleSubmit={this.createComment} 
user={this.props.user} 

/3 

</div> 


} 


export default Post,; 
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至 此 , 在 帖子 上 添加 和 显示 位 置 的 功能 就 为 用 户 添加 完了 。 投资 者 肯定 会 为 这 样 一 个 改变 洲 
戏 规则 的 特性 感到 高 兴 并 印象 深刻 ! 图 6-3 示 出 了 本 草 工 作 的 最 终 成 朱 。 


Mark Thomas 


Welcome! Whats on your mind? 
e 


If you're here, you're probably Add location (I 
reading React in Action from 

Manning Publications. This app 

is the example application that 

you'll build as you go through @ Mark Thomas 0 minutes ago 
the book. In React in Action, 

you'll learn: Wow much cool 


es。 Buildinga simple social 


app 
se Learning about the 


i 局 总 < = 
< 上 os = EN Fe 这 T 也 NS ~ 和 
2 一 = 完 Ey ”二 和 adsby Letters 
fundamentals of React Sd me : YY 
A ng Pe a Sa 


Jp roe ps hase dr teh cor phy | [于 sp Fad bossld tro 


Building React apps with 
modern javaScript 
(ES2015 and beyond) 
How React works (React ih | A fe 
in action covers through 1 NewYork,New york United States 
Reacy 16 (fiber)) 
Implementing a routing oO 
system from scratch 
Utilizing server-side 
rendering Real! World Sd 
。 Testing React applications 2 ts $i 
Implementing a Redux & Mark Thomas Rewriting Your Front 


i | End Rvery Six Weeks 
application architecture Check out the book at https://www.manning.com/books/react-in-action! 


If you have any questions or ORLY” 
thoughts, feel free to reach out 办 外 ads by Letters 
to me @markthethomas on the 


图 6-3 本章 工 作 的 最 终 成 果 。 用 户 可 以 创建 帖子 并 给 帖子 添加 位 置 


0 minutes ago 





6.3 小结 


下 面 是 我 们 在 本 章 中 学 到 的 主要 内 容 。 

国 React 中 ,ref 是 底层 DOM 元 素 的 引用 。 当 需要 应 急 手 段 并 且 需 要 使 用 在 React 之 外 操作 
DOM 的 库 时 ，ref 很 有 用 。 

国 组 件 可 以 是 受 控 的 或 非 受 控 的 。 受 控 组 件 让 使 用 者 完全 控制 组 件 的 状态 ， 它 涉及 从 监听 
到 设置 输入 值 的 整个 周期 。 非 受 控 组 件 在 内 部 维护 上 自己 的 状态 ,而 且 不 提供 洞察 或 控制 。 

加 通过 使 用 ref， 通 常 可 以 将 React 组 件 与 同样 使 用 DOM 的 第 三 方 库 集成 。 当 需要 接触 并 
与 DOM 元 素 交 互 时 ，ref 可 以 充当 应 急 手 段 。 

下 一 章 将 开始 增加 复杂 性 ， 我 们 将 为 应 用 程序 创建 基本 路 由 以 便 能 够 拥有 多 个 页 面 。 


第 7 半 React 的 路 由 


本 章 主要 内 容 

图 ”更 高 级 的 组 件 设 计 和 使 用 

国 使 用 路 由 启用 多 页 面 的 React 应 用 程序 
国 使 用 React 欢 头 构建 路 由 


在 本 章 中 , 我 们 开始 通过 添加 路 由 来 使 应 用 程序 更 加 强大 和 可 扩展 。 路 由 意味 着 用 户 能 够 使 
用 URL 导航 到 应 用 程序 的 不 同 部 分 。 到 现在 为 止 ， 这 款 应 用 程序 被 限制 在 一 个 页 面 内 ， 这 会 阻 
碍 新 内 容 的 添加 。 如 果 没 有 路 由 或 其 他 机 制 为 应 用 提供 可 管理 的 层级 结构 , 大 应 用 程序 会 特别 拥 
挤 。 我 们 来 看 看 如 何 使 用 React 解决 这 个 问题 。 我 们 会 从 头 开 始 构建 一 个 简单 的 路 由 ， 以 便 更 好 
地 理解 如 何 处 理 React 应 用 的 路 由 。 


如 何 获取 本 章 代码 

和 每 章 一 样 ， 读 者 可 以 去 GitHub 仓库 检 出 源 代 码 。 如 果 想 从 头 开始 编写 本 章 代码 ， 可 以 使 用 第 5 
章 和 第 6 章 的 已 有 代码 ( 如 果 跟着 编写 了 示例 ) 或 直接 检 出 取 指 定 章 的 分 支 ( chapter-7-8)。 

记 住 ， 每 个 分 支 对 应 该 章 未 尾 的 代码 ( 例如 ，chapter-7-8 对 应 第 7 章 和 第 8 章 未 尾 的 代码 )。 读者 
可 以 在 选 定 目录 下 执行 以 下 终端 命令 之 一 来 获取 当前 章 的 代码 。 

如 果 还 没有 代码 库 ， 请 输入 下 面 的 命令 来 获取 ， 


git clone git@github com:react-in-action/letters-social.git 
如 果 已 经 克隆 过 代码 仓库 ， 

git checkout chapter-7-8 

如 果 你 是 从 其 他 章 来 到 这 里 的 ， 则 需要 确保 已 经 安装 了 所 有 正确 的 依赖 


npm install 
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11 什么 是 路 由 


要 真正 了 解 路 由 ， 我 们 必须 先 对 它 是 什么 有 一 些 概念 。 无 论 怎样 ， 路 由 都 是 所 有 网 站 和 Web 
应 用 程序 的 关键 部 分 。 它 在 最 简单 的 静态 HTML 页 面 和 最 复杂 的 React Web 应 用 程序 中 都 扮演 着 
核心 作用 。 路 由 在 将 URL 映射 到 操作 上 起 着 很 大 作用 。 大 多 数 应 用 程序 都 充满 了 URL 链接 , 毕 葛 
链接 是 在 Web 上 四 处 跳 转 的 标准 方式 。 想 想 看 , 一 个 搜索 URL 内 容 的 系统 会 是 多 么 高 效 一 一 对 它 
们 的 使 用 几乎 无 处 不 在 ! 为 什么 URL 链接 对 于 网 上 检索 如 此 有 用 ? 也 许 是 因为 我 们 已 经 习惯 了 地 
址 这 样 的 路 由 系统 ， 即 使 URL 无 须 逐 项 导航 ， 它 们 也 帮助 我 们 找到 了 正在 寻找 的 东西 一 一 在 这 里 
是 应 用 或 资源 而 非 位 置 。 


定义 ”路 由 可 以 有 许多 不 同 的 含义 和 实现 。 对 我 们 而 言 ， 它 是 一 个 资源 导航 系统 。 抽象 地 说 ， 路 由 或 
许 是 你 已 经 熟悉 的 概念 ， 而 且 在 Web 工程 中 很 常见 。 如 果 你 使 用 浏览 器 ， 就 会 熟悉 路 由 ， 因 为 它 与 
浏览 器 中 的 URL 和 资源 ( 图像、 脚本 等 的 路 径 ) 相关 。 在 服务 器 端 ， 路 由 着 重 于 将 传 入 的 请 求 路 径 
匹配 到 源 自 数据 库 的 资源 。 我 们 正在 学 习 如 何 使 用 React， 因 此 本 书 中 的 路 由 通常 意味 着 将 组 件 (人 
们 想 要 的 资源 ) 匹配 到 URL (将 用 户 想 要 的 东西 告诉 系统 的 方式 ). 


路 由 是 Web 应 用 程序 的 重要 部 分 。 假 设 要 建立 一 个 让 用 户 可 以 创建 自 定 义 筹 款 页 面 的 Web 
应 用 程序 ， 用 来 为 他 们 的 重要 事项 筹集 资金 。 在 这 种 情况 下 ， 需 要 路 由 的 原因 有 很 多 。 

图 一 般 来 说 ， 人 们 可 以 给 Web 应 用 提供 外 部 链接 。 指 回 永 久 资源 的 URL 应 该 是 长 期 的 并 
随时 间 保 持 一 致 的 结构 。 

图 ”公共 筹 蒜 网 页 需要 让 所 有 人 者 可靠 地 访问 ， 所 以 需要 将 用 户 路 由 到 正确 页 面 的 URL。 

加 管理 界面 的 不 同 部 分 将 需要 它 。 用 户 需 要 能 够 在 浏览 历史 记录 中 前 后 移动 。 

加 ”网 站 的 不 同 部 分 将 需要 它们 自己 的 URL， 以 便 可 以 轻松 地 将 人 们 路 由 到 正确 的 部 分 (如 
/settings/profile 、/pricing 等 )。 

图 按 页 面 拆 分 代码 有 助 于 促进 模块 化 ， 从 而 拆 分 应 用 程序 。 这 与 动态 内 容 一 起 可 以 反 过 来 
减 小 在 特定 时 刻 要 加 载 的 应 用 程序 的 大 小 。 


现代 前 端 Web 应 用 的 路 由 


过 去 ，Web 应 用 的 基本 架构 使 用 了 一 种 不 同 于 现代 路 由 的 方法 。 旧 方法 涉及 服务 器 ( 想 一 想 
用 Python 、Ruby 或 PHP 创建 的 东西 ) 生成 HTML 标记 并 将 标记 下 发 到 浏览 器 。 用户 可 能 会 在 表 
单 里 填写 一 些 数 据 ， 然 后 再 将 数据 提交 给 服务 需 并 等 待 啊 应 这 在 使 Web 更 强大 方面 是 革命 性 
的 进步 ， 因 为 用 户 能 够 修改 数据 而 不 只 是 查看 数据 。 

目 那 时 起 ，Web 服务 在 设计 和 构造 方面 经 历 了 很 多 发 展 。 如 今 ，JavaScript 框架 和 浏览 右 技 
术 已 经 足够 先进 ， 以 至 于 Web 应 用 可 以 采用 更 独特 的 前 后 端 分 离 机 制 。 客 户 端 应 用 程序 (完全 
在 浏览 各 中 ) 被 服务 需 下 发 ， 然 后 客户 端 应 用 有 效 地 “接管 ”工作 。 而 后 服务 需 负 责 发 送 原始 数 
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据 ， 通 常 是 JSON 格式 。 图 7-1 说 明 并 比较 了 这 两 个 通用 架构 是 如 何 工 作 的 。 





旧 架 构 

ee 发 送 请 求 给 服务 器 区 

客户 端 (浏览 器 ) | GET'http://social.learnreactjs,io/ | 

| -HTM、 JS、 CSS 和 

| -每 个 请 求 都 完全 2. 从 数据 库 中 

重新 加 载 带 有 HTML、JS、CSS 的 200 OK 响应 获取 数据 

ee 响应 客户 端 DE 
1. 分 发 路 由 到 

未 来 请 求全 部 会 发 送 或 者 接收 正确 的 模型 


所 有 的 视图 和 资源 (JS、CSS) TE I. 








3. 用 查找 到 的 数据 











现代 架构 创建 HTML 或 者 
JSON 响 应 
es 发 送 第 一 个 请 求 到 服务 器 视图 
客户 端 (浏览 器 ) as 
| -HIM、JS、CSS | 带 有 HTML、JS、CSS 的 200 OK 响应 
-JS (React) | 
| | 
ee 过 | GET http://api.learnreactjs.io/ i [Post, Post, Post], 
A ee Fetehed sts” 
Was sone 带 有 JSON 的 200 OK 响应 er ee 
今后 的 请 求 只 针对 数据 


图 7-1 新 旧 Web 应 用 架构 的 简单 比较 。 在 旧 架 构 中 ， 动 态 内 容 由 服务 器 生成 。 服 务 器 通常 会 从 数据 库 中 
获取 数据 ， 然 后 使 用 这 些 数据 填充 要 发 送 给 客户 端的 HTML 视图 。 现 在 ， 客 户 端 上 拥有 更 多 JavaScript 管 
理 的 应 用 程序 逻辑 ( 这 里 是 React )。 服 务 器 最 初 会 下 发 HTML、JavaScript 和 CSS 资源 ， 但 之 后 客户 端 
React 应 用 程序 将 会 接管 。 从 这 里 开始 ， 除 非 用 户 手 动 刷 新 页 面 ， 否 则 服务 器 将 只 需 下 发 原始 JSON 数据 


至 此 , 我 们 一 直 使 用 现代 架构 构建 这 个 用 于 教学 的 应 用 Letters Social。Node.js 服务 需 发 送 应 
用 程序 需要 的 HTML、JavaScript 和 CSS。 一 旦 加 载 完 成 ，React 就 会 接管 。 接 下 来 的 数据 请 求 被 
发 送 到 六 例 API 服务 名 。 elaine did 


练 习 a 路 由 di 了 ， 






pa 


12 创建 路 由 器 
我 们 将 使 用 组 件 从 头 构建 一 个 简单 的 路 由 器 ,以便 能 更 好 地 理解 React 应 用 程序 如 何 进行 路 
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由 处 理 。 这 里 是 从 较 高 层次 来 看 我 们 要 怎样 推进 。 
国 ” 我 们 将 创建 两 个 组 件 ， 即 Router 和 Route， 它 们 会 一 起 用 于 完成 客户 端 路 由 。 
加 Router 组 件 由 Route 组 件 组 成 。 
加 每 个 Route 代表 一 个 URL 路 径 (/、/posts/123 ) 并 将 一 个 组 件 映射 到 该 URL。 当 用 户 们 
访问 /时 ， 他 们 会 看 到 该 路 径 的 组 件 。 
图 Router 组 件 看 起 来 就 像 一 个 普通 React 组 件 ( 它 有 render 方法 、 组 件 方法 并 且 使 用 了 
JSX )， 但 它 可 以 将 组 件 映射 到 URL 上 。 
国 Route 组 件 可 以 指定 /users/:user 这 样 的 参数 ， 其 中 :user 语法 表示 传递 给 组 件 的 值 。 
国 ”我们 还 会 创建 一 个 Link 组 件 ， 这 将 使 客户 端 路 由 需 能 够 进行 导航 。 
如 果 感 觉 还 不 是 完全 清楚 ,不 必 担 心 , 我 们 将 依次 完成 每 一 步 。 让 我 们 看 一 个 例子 ， 当 构建 
路 由 时 我 们 要 努力 实现 什么 。 
代码 清单 7-1 展示 了 将 要 构建 的 Router 组 件 的 最 终 形式 。 它 易于 阅读 和 思考 : 你 拥有 一 个 由 
绑 定 到 组 件 的 路 由 组 成 的 路 由 器 。 路 由 不 一 定 非 要 是 层级 结构 的 (可 以 创建 混乱 的 和 任意 俯 套 的 
资源 )， 尽 管 往 往 是 这 样 的 。 这 意味 着 它 可 以 相对 容易 地 映射 到 React 的 组 合 语义 上 上。 如果 第 一 
次 接触 使 用 React， 那 么 代码 清单 7-1 中 的 路 由 示例 可 能 是 能 够 立即 理解 的 最 容易 的 组 件 之 一 。 





代码 清单 7-1 Router 组 件 的 最 终结 果 ( src/index.js ) 


Router 组 件 存储 路 由 并 返 


4 
i 人 组件 并 把 它们 匹配 在 一 起 ， 并 且 
BE 可 以 在 彼此 之 间谍 套 几 个 组 件 
<Route path="/" component={App}> 
<Route path="posts/:post" component={SinglePost} /> 
<Route path="login" component={Login} /> 
</Route> 
</Router>, 
Js 可 以 将 代表 动态 值 的 参数 传递 给 组 件 路 径 ， 这 意 


味 着 可 以 从 路 由 获取 数据 并 在 组 件 里 使 用 它们 


这 种 路 由 需 结 构 易 于 阅读 和 思考 。 多 亏 了 React 的 Router，React 应 用 中 的 路 由 也 相当 完善 。 
我 们 会 使 用 相同 的 基本 API 来 效仿 构建 自己 的 路 由 器 。 当 这 样 做 的 时 候 ， 我 们 会 从 TJ 
Holowaychuk 创建 的 一 个 小 型 轻 量 路 由 需 库 react-enroute 中 获取 灵感 和 方向 。 我 们 通过 这 个 
库 可 以 探索 React 中 的 路 由 而 不 必 重 新 创建 像 React Router 这 样 的 完整 开源 库 。 

我 们 已 经 清楚 将 要 创建 的 是 什么 以 及 它 应 该 如 何 使 用 ， 但 我 们 从 哪里 开始 好 呢 ? 我 们 从 
children 开始 。 \ 


7.2.1 组 件 路 由 
我 们 不 会 用 新 东西 来 实现 应 用 的 路 由 。 相 反 ， 我们 将 使 用 children 这 个 特殊 的 组 件 属性 。 
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也 许 还 记得 前 面 章节 中 的 children 属性 ， 它 是 React ;createElement (type, props, 
children) 方 法 签名 的 一 部 分 或 者 作为 用 来 组 合 组 件 的 特殊 属性 。 

之 前 仅 从 输入 视角 关注 了 children: 将 一 些 组 件 传递 给 另 一 个 组 件 来 把 它们 组 合 到 一 起 。 现 
在 从 组 件 内 部 访问 childaren 并 利用 组 件 上 自身 来 搭建 路 由 。 这 就 是 开始 将 组 件 映射 到 URL 的 地 
方 。 如 果 Web 开发 中 的 路 由 是 将 URL 映射 到 行为 或 视图 , 那么 React 中 的 路 由 就 是 将 URL 映射 
到 特定 的 组 件 。 


7.2.2 创建 <Route /> 组 件 


我 们 将 创建 一 个 Router 组件 ， 它 将 用 子 组 件 匹 配 URL 到 组 件 的 路 由 并 将 组 件 泻 染 出 来 。 如 
果 你 很 难 想象 这 会 是 什么 样子 ， 记 住 ， 你 不 必 一 开始 就 理解 所 有 东西 ， 我 们 将 精心 讲解 每 一 步 。 

我 们 从 Route 组 件 开 始 ， 可 以 用 Route 将 组 件 和 路 由 关联 起 来 。 代 码 清 单 7-2 展示 了 如 何 创 
建 Route 组 件 。 这 看 起 来 可 能 没什么 内 容 ， 但 很 快 你 就 会 看 到 ， 这 就 足够 了 了 。Router 组 件 会 完成 
大 部 分 繁重 的 工作 ， 而 Route 组 件 主要 作为 URL 和 组 件 映 射 的 数据 容 佑 。 


代码 清单 7-2 创建 一 个 Route 组 件 ( src/components/router/Route.js ) 





import PropTypes from '‘'prop-types'; 

import { Component } from 'react'; 引入 invariant 库 以 确保 Route 组 件 

import invariant from ‘invariant'; 不 会 被 演 染 ， 或 者 溶 染 时 会 抛 出 
ZZ 日 9 纪 日 3 EE 


人 上 此 :已 
class Route extends Component { 错误 


static propTypes = { 

path: PropTypes.string, 

component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), 
} 。 


render() i 


return invariant (false, "<Route> elements are for config only and 
shouldn't be rendered"); 
} 整个 Route 组 件 只 是 一 个 返回 对 invariant 库 


} 调用 的 滑 数 一 一 如 果 有 调用 的 话 ， 就 会 抛 出 
错误 ,我 们 就 知道 事情 不 对 了 


export default Route; 


每 个 Route 需 要 一 个 路 径 和 一 用 命名 导出 来 让 
个 函数 ， 所 以 用 PropTypes 指 组 件 可 用 于 外 部 
定 这 些 属 性 模块 


可 能 注意 到 这 里 导入 一 个 被 称 为 invariant 的 新 库 。 它 是 一 个 简单 的 工具 ， 用 于 确保 在 某 些 条 
件 不 满足 的 情况 下 抛 出 错误 。 要 使 用 它 ， 只 需要 传 和 一 个 值 和 一 个 消息 。 如 果 这 个 值 是 假 (null、0、 
undefined、NaN、' ' 或 者 false),， 它 就 会 抛 出 一 个 错误 。React 经 向 使 用 invariant 库 ， 所 以 
如 果 曾 经 在 开发 者 工具 控制 台 里 看 到 警告 或 者 错误 消息 报告 了 “invariant violation ”这 样 的 东西 ， 就 可 
能 使 用 了 invariant 库 。 这 里 将 使 用 它 来 确保 Route 组 件 不 泻 染 任何 东西 。 

没 错 ，Route 组 件 不 泻 染 任何 东西 。 如 果 演 染 的 话 ，invariant 工具 将 抛 出 错误 。 乍 一 听 ， 
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这 似乎 是 在 做 一 件 奇 怪 的 事 。 毕 竟 ,， 到 目前 为 止 我 们 一 直 在 组 件 中 进行 大 量 泻 染 。 但 是 ,这 仅 是 
以 React 可 以 理解 并 让 使 用 者 能 够 利用 的 方式 将 路 由 和 组 件 组 织 在 一 起 的 办 法 。 我 们 将 使 用 Route 
组 件 存储 props 并 传人 想 要 的 children。 随 看 构建 出 Router 组 件 ， 这 会 变 得 更 加 清晰 ， 但 在 继续 
检验 你 的 理解 之 前 ， 先 看 一 下 图 7-2。 


路 由 器 将 组 件 匹 配 到 URL 路 径 上 


i 
] <Router /> 组 件 内 
[ | -六 y 


| | 
Route /> path="/home” component={<Home />} /home <Home/> 

















( 



























<Route /> path="/profile” component={<Profile />} /profile <Profile/> 
| | 
ml 区 <Route /> Ne profile-picture” ope Ph /profile/profile-picture <AvatarSettings/> 
| 一 一 一 "| 
| <Route /> path="email" nn | /profile/email <EmailSettings/> 
| oaia /> path=" posts/ ee component= -(<Post py} — /posts/12345 <Post/> 
Route 组 件 可 以 相互 藤 套 特定 的 路 由 参数 语法 允许 参数 化 路 由 


图 7-2 Route 和 Router 组 件 的 工作 原理 的 概览 。 下 一 节 要 构建 的 Router 组 件 拥 有 作为 其 子 组 件 的 
Route 组 件 。 每 个 组 件 都 有 两 个 属性 一 个 path 字符 串 和 一 个 组 件 。<Router /> 将 使 用 每 个 
<Route /> 来 匹配 URL 并 泻 染 正确 的 组 件 。 因 为 所 有 东西 都 是 React 组 件 ， 使 用 者 可 以 在 
演 染 时 给 路 由 器 传递 属性 并 将 这 些 作 为 高 层 数 据 的 初始 应 用 状态 ， 如 用 户 、 认 证 状态 等 


7.2.3 ”开始 构建 <Router /> 组 件 


为 了 在 Router 组 件 上 开始 工作 ， 你 需要 再 次 了 解 创建 组 件 的 基础 知识 。 尽 管 你 应 该 对 此 很 
熟悉 了 ， 但 最 终 你 会 构建 一 个 做 至 此 从 没 见 过 的 独特 事情 的 组 件 。 好 消息 是 不 WE ， 魔 
法 ”就 能 创建 路 由 需 。 我 们 将 使 用 React 组 件 ， 回 Router 组 件 中 添加 一 些 逻 辑 ， 然后 将 其 用 作 应 
用 程序 泻 染 的 主要 组 件 。 

这 也 许 看 起 来 没什么 大 不 了 的 。 你 也 许 在 想 :“ 好 吧 , 所 以 它 是 一 个 组 件 。 毕 竟 这 是 React， 所 
以 看 起 来 …… 很 正常 ? ”我 之 所 以 要 指出 这 一 点 , 是 因为 这 是 一 个 强大 而 灵活 的 东西 的 好 例子 一 一 
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使 用 者 “ 仅 ” 用 React 就 能 做 到 但 却 不 会 立即 想到 。 我 们 不 需要 任何 全 新 的 工具 ， 只 需要 找到 一 
记录 URL 与 组 件 映射 关系 的 方法 以 及 一 种 与 正确 浏览 希 API 交互 的 方法 。 现 在 可 以 开始 构建 这 
组 件 了 。 


React Router 如 何 ， en 1 | 

如 果 曾经 使 用 过 React, 也 许 听 说 过 React Routere 它 是 开源 里 最 流行 的 React 项 页 目 之 一 一 并 且 是 
这 人 为 上 pa tt 应 用 程序 最 流行 J 2 你 也 许 想 知道 为 什么 不 直接 安装 React Router 并 
些 原本 可 能 没有 意识 到 ct es ( 如 将 URL 组 件 ) 的 机 人 。 比 起 通过 npm 简单 地 
安装 一 些 东西 所 学 到 的 ， ,通过 自己 构建 一 些 东 西 可 以 学 到 更 多 wo 

“全 这 与 你 在 商业 环境 或 任何 关 型 的 生产 环境 中 可 能 做 的 事情 不 同 。 如 同 从 头 构建 自己 的 路 由 器 
一 样 有 帮助 ， 作为 工程 师 的 主要 任务 ( 几乎 总 是 ) 是 为 公司 交付 价值 ， 要 最 高 效 地 实现 这 一 Ne 要 么 构 
建 工具 ， 要 么 使 用 经 过 良好 测试 的 、 性 能 卓越 而 且 简单 易 用 的 工具 。 \ 

”认识 到 这 一 点 ， 你 和 你 的 团队 也 许 就 会 选择 使 用 React Router 而 不 是 构建 自 己 的 路 由 器 。 选择 
一 款 维护 良好 的 、 流行 的 、 符合 需求 的 开源 库 通常 是 一 个 更 好 的 工程 和 商业 决策 。 当 第 12 章 讨论 服务 器 
端 泻 染 时 ， 我 们 会 用 React Router 替换 掉 自 己 构建 工具 的 路 由 ， 以 便 能 利用 React Router 的 -此 
特性 。 


代码 清单 7-3 展示 了 如 何 找寻 Router 组 件 。. 这 里 除了 在 组 件 上 设置 routes 属 性 没有 什么 不 
寻常 的 东西 。 注 意 ， 因 为 不 想 做 任何 事情 来 动态 改变 路 由 ， 所 以 不 能 将 路 由 存储 在 React 的 本 地 
组 件 状 态 中 。 某 些 情况 下 可 能 想 在 运行 时 动态 改变 路 由 , 如 用 户主 动 定制 应 用 程序 或 类 似 的 事情 。 
在 这 些 情况 下 可 以 使 用 组 件 的 state 接口 。 不 过 这 里 不 会 有 这 种 需要 ， 所 以 将 路 由 放 在 组 件 上 
即 可 。 





代码 清单 7-3 ”搭建 Router 组 件 ( srclcomponents/routerRouterjs) 


export default class Router extends Component { 

static propTypes = { : 

children: PropTypes.object, children 和 location 来 工作 
location: PropTypes.string.isRequired 


}» 





指定 PropTypes 一 一 router 会 接收 


constructor (props) { 在 Router 组 件 上 用 一 个 
super (props) ; 对 象 来 存储 路 由 信息 
this.routes = {}: 

} Router 组 件 会 有 一 个 
render 方法 
render() {} 


} 


现在 有 了 Router 组 件 的 基本 骨架 ， 可 以 开始 添加 一 些 之 后 组 件 核 心 方法 会 用 到 的 辅助 方法 。 
要 使 用 路 由 还 有 一 些 事情 需要 做 。 如 果 仔 细 看 过 代码 清单 7-2， 你 也 许 会 看 到 传人 的 path 
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属性 并 不 全 是 以 /开头 的 。 这 看 上 去 似乎 是 一 件 小 事 ， 但 需要 确保 路 由 需 的 使 用 痢 能 够 这 样 做 。 
如 果 使 用 者 由 于 偶然 或 路 由 艇 套 而 包含 太 多 斜 杜 ， 还 需要 确保 任何 双 斜 杜 ( // ) 都 已 被 删除 。 
让 我 们 看 看 如 何 创 建 两 个 辅助 方法 来 解决 这 些 问题 。 首 先 ， 我们 想 要 创建 一 个 实用 方法 来 清理 
路 径 。 我 们 将 使 用 一 个 简单 的 正则 表达 式 将 任何 双 和 斜 线 蔡 换 为 单 冬 杠 。 如 果 不 熟 悉 正 则 表达 式 ， 可 
以 从 网 上 找到 很 多 不 错 的 资源 来 进一步 学 习 。 正 则 表达 式 是 文本 模式 匹配 的 有 效 方 式 ， 也 是 很 多 软 
件 开 发 形式 的 关键 ,但 它们 可 能 也 显得 非常 星 涩 ,难以 理解 或 者 学 习 。 幸 好 ， 我 们 只 需要 用 一 个 向 
单 的 正则 表达 式 来 查找 并 替换 所 有 双 和 斜 杠 ( // )。 代 码 清单 7-4 展示 了 如 何 实 现 人 简单 的 cleanPath 
方法 。 注 意 ， 使 用 正则 表达 式 清 理 字 符 串 可 能 比较 棘手 ， 所 以 不 要 期 望 遇 到 的 每 种 情况 都 如 此 简单 。 





代码 清单 7-4 将 cleanPath 实用 方法 添加 到 Router 组 件 中 ( src/components/router/Router.js ) 


Fe 
cleanPath(path) { 
return path.replace(/\/\//g, 107 





cleanPath 使 用 String.replace 从 path 


属性 (/) 中 移 除 所 有 双 斜 杠 字符 


‘ee 


我 们 不 会 深入 讨论 正则 表达 式 ， 但 我 们 至 少 应 该 注意 一 些 事情 。 首 先 ，JavaScript 的 正则 表 
达 式 的 基本 语法 是 两 个 斜 杜 和 中 间 的 表达 式 /<regular expression>/。 其 次 ， 即 使 \/\/ 这 
样 的 字符 串 看 起 来 很 神秘 并 且 有 点 儿 像 W， 它 也 只 是 添加 了 转 义 字符 (\ ) 的 两 个 斜 杠 ( // )， 
因此 它们 不 会 被 解释 为 注释 或 者 其 他 东西 。 最 后 , 添加 到 正则 表达 式 未 尾 的 g 字符 是 一 个 意味 着 
匹配 所 有 出 现 的 标记 。 想 学 习 更 多 关于 正则 表达 式 的 内 容 , 可 以 了 解 一 下 正则 表达 式 的 各 部 分 的 
详细 信息 并 练习 匹配 不 同 模 式 。 

现在 可 以 清除 // 了， 我 们 需要 为 新 添加 的 路 由 处 理 一 些 其 他 情况 。 我 们 将 调用 normalize- 
Route 这 个 实用 方法 ， 它 会 确保 父 路 由 和 子路 由 创建 为 正确 的 字符 串 并 在 必要 时 添加 斜 枉 。 该 
曙 数 会 接收 一 个 路 径 和 一 个 可 选 的 父 路 由 。 有 了 这 两 个 输入 就 可 以 应 付 一 些 情 况 。 代 码 清 单 7-5 
展示 了 normalizeRoute 方法 的 工作 原理 。 





代码 清单 7-5 ”创建 normalizeRoute 实用 方法 ( src/components/router/Router.js ) 





限 数 接收 路 径 和 父 路 由 对 象 一 一 路 由 
属性 是 一 个 路 径 字 符 串 

如 果 路 径 只 是 一 个 /， 可 以 直接 返回 它 一 一 我 们 

不 需要 把 它 与 父 路 由 连接 在 一 起 


区 
normalizeRoute(path, parent) { 
if (sath[l0] === + 1{ 
return path; 





} 


if (parent == null) { 
return path; 


} 


如 果 没 有 被 提供 父 路 由 ， 可 以 直接 
返回 路 径 ， 因 为 没有 什么 要 连接 的 





return `“${Pparent .routel/SftpPpath}j :; 如 果 有 父 路 由 ， 通 过 连接 将 路 径 
本 er 
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7.2.4 匹配 URL 路 径 和 参数 化 路 由 


我 们 已 经 创建 了 一 些 辅助 方法 , 但 还 没有 做 任何 路 由 的 工作 。 为 了 开始 将 URL 匹配 到 组 件 ， 
需要 将 路 由 添加 到 路 由 天 中 。 要 如 何 做 呢 ? 本 质 上 ， 需 要 找到 一 种 方法 基于 当前 URL 泻 染 给 定 
的 组 件 一 一 我 一 直 讨 论 的 “匹配 ”部 分 。 也 许 听 起 来 没有 太 多 工作 ， 但 涉及 的 步骤 也 不 少 。 

首先 , 让 我 们 看 看 浏览 融 前 端 路 由 系统 的 一 个 关键 部 分 : 路 径 匹配 。 我 们 需要 一 些 方法 来 对 
路 径 字 符 串 求 值 并 将 它们 转换 为 能 够 使 用 的 有 意义 的 数据 。 我 们 会 用 一 个 名 为 enroute 的 小 软 
件 包 来 完成 这 个 工作 , 它 本 映 就 是 一 个 微型 路 由 需 , 我 们 将 使 用 它 把 路 径 匹 配 到 组 件 。 enroute 
内 部 可 以 将 字符 串 转 换 为 可 用 于 匹配 字符 串 的 正则 表达 式 ( 如 要 检查 的 URL )。 也 可 以 用 它 来 指 
定 路 径 参 数 ， 从 而 可 以 创建 像 /users/:user 这 样 的 路 径 ， 然 后 就 可 以 在 代码 中 用 类 似 
route.params .user 的 方式 获取 /users/1234 中 的 用 户 ID。 这 种 方法 很 常见 ， 如 果 使 用 过 
express.js 的 话 ， 也 许 已 经 见 过 类 似 的 做 法 。 

这 种 参数 化 URL 的 能 力 很 有 用 , 因为 通过 这 种 方式 就 可 以 将 URL 视 为 男 一 种 可 以 传递 给 路 
由 盘 的 数据 输入 形式 。 URL 很 强大 ， 使 它们 动态 化 是 其 中 一 个 原因 。URL 可 以 是 表意 的 并 且 能 
让 用 户 耻 接 访 问 资源 ， 而 无 须 先 访问 一 个 页 面 ， 再 导航 多 次 才能 到 达 他 们 想 去 的 地 方 。 

虽然 没有 使 用 参数 化 路 由 的 全 部 能 力 ， 但 让 我 们 看 一 些 示 例 ， 确 保 清楚 工作 的 走向 。 表 7-1 
展示 了 几 个 在 普通 Web 应 用 中 可 能 很 有 用 的 URL 路 径 示 例 。 


表 7-1 常见 的 参数 化 路 由 示例 


路 由 使 用 示例 
} 应 用 程序 的 主页 
/profile 用 户 的 个 人 配置 页 面 ， 展 示 一 些 配 置 
/profile/settings 设置 的 路 由 ， 个 人 配置 页 面 的 子 页 面 ， 展 示 用 户 相 关 的 设置 


PostID 可 以 用 于 代码 层面 , 示例 路 由 可 能 是 /posts/2391448。 如 果 想 
创建 指 辐 特定 帖子 的 公开 链接 ， 它 非常 有 用 


/users/:userID :USerID 是 一 个 路 径 参 数 ， 对 基于 用 户 ID 展示 特定 的 用 户 非 常 有 用 


展示 一 个 用 户 的 所 有 帖子 ，URL 的 :userID 部 分 是 动态 的 并 可 以 在 
代码 中 获取 


/posts/ :PostID 


/users/:userID/posts 


:name 语法 只 利用 了 参数 化 路 由 的 一 个 方面 ， 还 有 一 些 工 具 可 以 做 更 多 事情 。 如 果 有 兴趣 
学 习 更 多 参数 化 路 由 的 知识 ， 可 以 检 出 path-to-regexp 库 ， 它 是 一 个 很 强大 的 工具 ,还 有 些 
其 他 东西 值得 我 们 花 时 间 了 解 一 下 ， 但 我 们 还 是 要 把 精力 集中 到 手头 的 任务 上 : React 路 由 。 

这 些 路 由 工具 ( enroute 和 path-to-regexp ) 的 重要 用 途 在 于 使 用 它们 辅助 匹配 URL 
并 处 理 URL 中 的 路 径 参 数 。 现 在 用 什么 工具 或 者 是 否 构建 自己 的 工具 都 不 重要 ， 我 们 只 需要 一 
些 能 让 自己 将 精力 集中 在 基础 原理 之 上 的 东西 。React 最 棒 的 一 点 就 是 使 用 者 可 以 在 构建 应 用 时 
自由 地 决定 使 用 哪些 路 由 工具 。 
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练习 7-2 思考 参数 ， 
参数 化 路 由 通常 是 数据 导入 应 用 程序 的 一 -种 有 用 方法 。 除了 获取 由 了 D, 人 让 双关 叶 


由 参数 的 方法 7 


我 们 使 用 URL 区 本 库 ( enroute ) 矿 克 证 沁 织 喀 卡 吴 让 ， ， 所 以 接 下 来 就 会 在 组 件 上 进行 设 
置 。 现 在 ，Router 组 件 有 一 个 不 做 任何 事情 的 render 方法 ,这 看 起 来 是 开展 工作 的 好 地 方 。 代 
码 清 单 7-6 展示 了 如 何 与 路 由 器 集成 enroute 以 及 对 render 方法 的 修改 结果 。 





代码 清单 7-6 ”完成 路 由 器 ( src/components/router/Router.js ) 
Import enroute from "enroute ' ; 
import invariant from "'invariant'; | enroute 是 一 个 小 型 功能 路 由 器 ， 可 以 
| 用 来 匹配 URL 字符 串 和 参数 化 路 由 


export class Router extends Component 1{ 


static propTypes = { 
children: PropTypes.element.isRequired, 将 propTypes 设置 为 类 
location: PropTypes.string.isRequired, 的 静态 属性 
} 
constructor(props) { ee 
态 并 初始 化 enroute 


super (props); 


// We'll store the routes on the Router component 约 ， . 
this. routes = {}} 路 由 最 终 将 成 为 以 


URL 路 径 为 键 的 对 象 
// Set up the router for matching & routing 
this.router = enroute(this.routes).,; 
} 将 路 由 传 给 enroute，render 会 使 用 enroute 
的 返回 值 来 进行 URL 到 组 件 的 匹配 
render() { 
const { location } = this.props; i 
invariant (location, '‘'<Router/> needs a Location to work'); 将 当前 地 址 
作为 属性 传 
给 路 由 各 


return this.router(location) 
} 
} 最 后 也 是 最 重要 的 ， wma 使 用 invariant 来 确保 
匹配 地 址 并 返回 相应 的 组 件 不 会 忘记 提供 地 址 


我 们 并 没有 添加 太 多 代码 , 但 路 由 带 最 重要 的 一 些 部 分 已 经 就 绕 。 现 在 , 还 没有 任何 可 用 于 
enroute 的 路 由 ,但 基本 工作 机 制 已 经 形成 : 尝试 寻找 与 路 由 相关 联 的 组 件 ， 然 后 用 路 由 帮 来 
泻 染 它 。 下 一 节 ， 我 们 会 创建 路 由 右 可 以 使 用 的 路 由 。 


7.2.5 ”向 Router 组 件 添加 路 由 


为 了 问 路 由 带 添 加 路 由 , 需要 两 样 东西 : 要 使 用 的 正确 URL 字符 串 以 及 这 个 URL 对 应 的 组 
件 。 我 们 会 在 Router 组 件 上 创建 addRoute 方法 ， 该 方法 会 将 这 两 样 东西 联系 在 一 起 。 如 果 快 
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速 浏览 enroute 的 用 法 示例 ， 就 能 看 到 enroute 的 工作 原理 。 它 接收 一 个 键 为 URL 字符 串 而 
值 为 函数 的 对 象 ， 当 其 中 一 个 路 径 被 匹配 上 时 , 它 就 调用 相应 函数 并 传递 一 些 额 外 的 数据 。 代 码 
清单 7-7 展示 了 在 没有 React 的 情况 下 如 何 使 用 enroute 库 。 使 用 enroute 可 以 将 接收 参数 和 任 
何 附加 数据 的 函数 匹配 到 URL 字符 虽 





代码 清单 7-7 路 由 配置 示例 ( src/components/router/Router.js ) 


使 用 两 个 参数 : 路 由 参数 ( 像 /users/:user ) 
和 任何 传人 的 附加 数据 





function edit user (params, props) 1{ 
return Object.assign({}, params, props) 


} 





const router = enroute ( { 
!'/users/new': create user, 


传人 一 个 珊 有 路 径 和 创 


"/Uusers/*Slug': find vser, 建 来 处 理 这 些 路 径 的 也 
'/users/:slug/edit': edit user, 数 的 对 象 
St GN 


pi 


确 的 函数 将 会 被 执行 


现在 已 经 对 enroute 如 何 工作 有 了 些 概念 ， 让 我 们 看 看 如 何 将 它 集 成 到 路 由 需 中 并 让 它 运 
转 起 来 。 不 是 像 之 前 代码 清单 那样 返回 对 象 ， 而 是 想 要 返回 组 件 。 但 现在 没有 办 法 获取 路 由 的 路 
径 或 组 件 。 还 记得 是 如 何 创建 了 一 个 Route 组 件 来 存储 这 些 信息 但 没有 泻 染 任何 东西 的 吗 ? 需要 
从 父 组 件 (Router 组 件 ) 访问 这 些 数据 。 这 意味 独 需 要 用 到 children 属性 。 


注意 我 们 已 经 看 到 了 如 何在 React 中 通过 创建 组 件 之 间 的 父子 关系 来 组 合 组 件 以 创建 新 的 组 件 。 
到 目前 为 止 ， 我 们 只 是 在 将 组 件 彼此 贞 套 时 “外 部 地 ”使 用 了 子 组 件 。 任何 时 候 肉 套 组 件 和 组 合 组 
件 都 在 利用 React 的 子 组 件 概 念 。 但 我 们 还 没有 从 父 组 件 动态 访问 任何 庶 套 的 子 组 件 。 我 们 可 以 通 
过 组 件 属性 访问 传递 给 父 组 件 的 子 组 件 ， 猜 得 没 错 ， 这 个 属性 就 是 children. 


每 个 React 组 件 或 元 素 上 的 children 属性 就 是 我 们 所 说 的 不 透明 数据 结构 ， 因 为 与 React 
中 的 几乎 所 有 其 他 东西 不 同 ， 它 不 只 是 数组 或 JavaScript 纯 对 象 。 这 也 许 会 在 React 今后 的 版 本 
中 发 生 改 变 ， 但 同时 ， 这 意味 着 React .Children 上 有 许多 方法 可 以 用 来 处 理 children 这 
个 不 透明 数据 结构 ， 包 含 下 面 这 些 。 

国 React.Children.map 类 似 于 原生 JavaScript 中 的 Array .map， 它 在 children 

中 的 每 个 直接 子 组 件 上 调用 一 个 函数 〈 意味 着 它 不 会 遍历 每 个 可 能 的 后 代 组 件 ， 只 是 下 
接 后 代 ) 并 返回 一 个 其 遍历 元 素 组 成 的 数组 。 如 果 children 属性 是 null 或 者 
undefined， 就 返回 null 或 者 undefined 而 不 是 空 数 组 : 


要 使 用 enroute, 传人 地 
enroute('/users/mark/edit', { additional: 'props' }) 址 和 附加 数据 ， 然 后 正 





React .Chilaren.map (children, functionl (thisArg)]) 


类 似 于 React .Children .map 的 工作 方式 , 但 是 不 





国 React.Children.forEach 
会 返回 数组 : 
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React.Children.forgach(children; functionl| (thisArg)]) 


返回 children 中 发 现 的 组 件 的 总 数 ， 等 于 React . 
Children.map 或 React.Children.forEach 在 相同 元 素 集 合 上 调用 其 回调 的 次 数 : 


React, Chi Ladrern count (eiladren) 


图 React .Children.only 一 一 返回 children 中 唯一 的 子 组 件 ， 否 则 抛 出 一 个 错误 : 


React.Children.only (children) 





国 React .Children .count 


国 React.Children.toArray 
每 个 于 元 系 ; 
React.Children.toArray (children) 


由 于 想 将 路 由 信息 添加 到 Router 组 件 的 this .routes， 因 此 会 使 用 React.Children. 
forEach 遍历 Router 的 children 的 每 个 元 素 ( 记 住 , 它们 是 Route 组 件 ) 并 访问 它们 的 属性 。 
我 们 将 用 这 些 属性 来 设置 路 由 并 告诉 enroute 哪个 URL 应 该 泻 染 哪个 组 件 。 


React 中 的 “ 自 消除 ” 组 件 \ I 
小 当 React +6 问世 ， 它 人 允许 组 件 从 rengder 方法 中 返回 数组 。 这 在 之 前 是 不 可 能 的 ， 它 带 来 了 一 些 有 趣 的 可 


能 性 ， 其 中 一 个 是 “ 自 解构 ”或 “ 自 消除 ” 组 件 的 概念 5 ;之 前 | 通 肖 发 现 
只 是 为 了 JavaScript 输出 有 效 而 将 组 件 包 装 在 dv 和 span 中 ， i 


export Const' parent = () 2 





将 children 作为 一 个 摊 平 的 数组 返回 并 将 键 分 配给 











return.l. 
‘<Plex> Bt 
人 NE 俩 用 Hlexbox 
Wales | 布局 (或 者 CSS 网 格 ) 网 从 
\ 人 </Flex> i tees 
rl 
We di | 
Sn export const LinksCollection = > => 
人 “retin oa Mea a or 和 eo a hi 
i pa <div> Wi 
et 添加 包装 用 的 div， ,因为 User、 ob 
a 人 以 Oe deni te 
es OPO 
的 div> ee 
和 0 | i 
对 许多 团 ; 说 ， 这 曾 是 许多 烦恼 的 来 源 ， 即使 它 确 实 没 用 上 人 们 使 用 1 而 它 造成 的 主要 
问题 可 不 只 是 包装 div 显得 多 余 。 正 如 所 见 ， 这 个 应 用 使 用 了 Flexbox 来 布局 ( 或 者 一 些 其 他 在 这 个 志 


景 中 会 被 破坏 的 1 SS 布局 AP 、 


QO 非常 感谢 Ben llegbodu， 首 次 向 我 介绍 了 这 个 概念 ! 
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包装 div 造成 的 问题 是 ， 它 强 制 使 用 者 向 上 移动 组 件 以 便 它们 不 用 在 单个 节点 的 分 组 中 。 当然 还 有 
造成 问题 或 强制 变通 的 其 他 原因 ， 但 这 是 我 多 次 遇 到 的 问题 。 

随 着 React 16 及 后 续 版 本 的 到 来 , 返回 数组 成 为 可 能 , 所 以 现在 我 们 有 一 个 办 法 来 实现 它 。 React 16 
引入 了 很 多 其 他 强大 的 功能 ， 但 这 个 方法 是 非常 受 欢 迎 的 改变 。 开发 者 现在 可 以 这 么 做 : 

export const SelfEradicating = {props) 和 props.children SN 

这 个 组 件 充 当 子 某 种 直通 角色 ， 当 它 泻 染 其 子 组 件 时 可 以 避 开 或 者 “ 自 消除 "。 通过 这 种 方式 ， 在 维 
持 组 件 分 离 的 同时 不 必 防 范 破坏 CSS 布局 技术 之 类 的 东西 。 使 用 “ 自 消除 ” 组 件 的 场景 看 起 来 像 这 样 : 


Tt const SelfEradicating = (props) => props.children 


export const Parent = () => 1{ 
return ( 
<Flex> 
<Sidebar/> 
<Main /> 
‘<LinksCollection/> ee 
i eT 
} eT a dD sae ad opel > 
export const LinksCollection = 0 
returr t( 
dSerfpradieating> 
<User /> 
<Group /> 
<Org /> 
</SelfEradicating> 
Er a 
} 


记 住 ，enroute 和 布 望 为 每 个 路 由 都 提供 一 个 函数 ， 以 便 它 能 将 参数 信息 或 其 他 数据 传 给 路 

由 。 这 个 盟 数 将 告诉 React 创建 组 件 以 及 处 理 其 他 子 组 件 的 泻 染 。 代 码 清单 7-8 展示 了 组 件 中 的 

addRoute 和 addRoutes 方法 。addRoutes 使 用 React .ChilLldren.forEach 遍历 所 有 子 

Route 组 件 ， 获 取 它 们 的 数据 ， 并 设置 enroute 使 用 的 路 由 。 这 是 路 由 器 的 核心 ， 一 旦 实现 了 
一 点 ， 路 由 将 司 动 并 运行 ! 





代码 清单 7-8 addRoute 和 addRoutes 方法 (src/components/routerRouter.js ) 





确保 每 个 Route 都 有 路 径 和 组 render 是 一 个 提供 

件 属性 ， 否 则 抛 出 错误 使 用 解构 获取 组 件 、| ”给 enroute 的 函数 、 

路 径 和 children 属性 | 其 接收 路 由 相关 的 

addRoute(element, parent) { 参数 和 额外 的 数据 
const { component, path, children } = element.props; 十 一 


invariant (component, Route s${path} is missing the "path" property ); 
invariant (typeof path === 'string', Route S${path} is not a string.); 





const render = (params, renderProps) => 1 < 
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将 父 组 件 的 属性 与 子 组 件 的 属性 合并 在 一 起 
const finalProps = Object.assign({f params }, this.props, renderProps); 


const children = React.createElement (component, finalProps); 





return parent ? parent.render(params, { children }) : children; 
}; 
使 用 合并 后 的 属性 创建 新 组 件 
const route = this.normalizeRoute (path, parent); 
if (children) { 如 果 当 前 Route 
this.addRoutes(children, { route, render });，; 组 件 还 有 散 套 的 
} 子 组 件 ， 重 复 这 
this.routes[this.cleanPath(route)] = render; 个 过 程 并 传人 路 
} 由 和 父 组 件 
wi 
使 用 normalizeRoute 辅助 限 数 
使 用 cleanPath 实用 方法 在 路 来 确保 URL 路 径 正确 设置 
由 对 象 上 创建 路 径 并 将 已 完 
人 六 乡 洁 会 / 
成 的 函数 赋值 给 它 如 果 有 父 组 件 ， 调 用 parent 参数 的 render 


方法 ， 但 使 用 已 创建 的 子 组 件 


这 几 行 代码 中 包含 不 少 东 西 ， 请 随时 回顾 以 确保 吃透 这 些 概念 。 一 旦 添加 了 addqRoutes 方 
法 ， 我 们 就 概括 这 些 步 又 并 进行 可 视 化 的 回顾 。 但 首先 要 添加 addqRoutes 方法 。 相 比 而 言 ， 
addRoutes 方法 非常 短小 ， 代 码 清单 7-9 展示 了 如 何 实现 它 。 





nn 区 人 
We 


7 React 的 props. childrene props.children 和 其 他 属 往 有 什么 不 同 ? 为 什么 


代码 清单 7-9 addRoutes 方法 ( src/components/router/Router.js ) 





ConstLructor (PrOoPS) { 


super (Props) ; 即使 在 addRonute 方法 中 

this.routes = {}; 使 用 addRoutes， 也 要 在 

this.addRoutes (props.children); 组 件 的 构造 国 数 中 添加 
this .router = enroute (this .routes) ; 它 ， 以 开始 设置 路 由 


addRoutes (routes, parent) { 
React.Children.forEach (routes, route => this.addRoute (route, parent)); 


} 


当 addRoute 方法 中 有 要 迭代 的 
子 元 素 时 使 用 addRoutes 


使 用 React.Children.forEach 实用 方法 遍历 每 个 子 组 
件 ， 然 后 为 每 个 子 Route 组 件 调用 addRonute 方法 
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回路 由 需 添 加 路 由 的 过 程 如 图 7-3 所 示 。 

















| 
| <Route /> 


一 一 -一 一 一 一 一 一 -一 一 一 一 一 一 ee 一 ri 一 一 一 一 iriver 一 一 ie 一 














一 一 和 TE ~ 

| <Router /> | 

| this.routes = {} | 
{ FE WN | 

| 人 9 路 径 ， 组 件 | this.routes.[path] <===> function(params, props){ 

| Route /> return Component 

| ed } | 
| <Route /> | 路 征 ， 组 件 if (children) { | 

| | a | addRoutes(children) | 
| | | } | 
| | 


AN ep gs 二 i i oh i a ma 











7-3 向 路 由 器 添加 路 由 的 过 程 。 对 于 | Router ,fr 组件 中 找到 的 每 个 Re Route e 组 件 ， 将 取 和 导 路 径 和 组 件 属性 ， 
然后 使 用 这 些 信息 创建 一 个 用 来 与 URL 路 径 配 对 的 函数 enroute。 如 果 Route 有 子 组 件 ， 继 续 之 前 对 
这 些 组 件 运行 相同 的 过 程 。 当 完成 的 时 候 ，routes 属性 将 设置 好 所 有 正确 的 路 由 


至 此 ， 路 由 需 就 完成 了 并 且 准 备 好 代码 清单 7-10 展示 了 最 终 的 Router 组 件 ， 而 且 
为 了 简洁 省 略 了 辅助 工具 ( 路 径 规 范 化 ， 不 变量 的 使 用 )。 在 下 一 章 我 们 会 将 Router 组 件 投入 
使 用 。 


代码 清单 7-10 ”完成 的 Router 组 件 ( src/components/router/Router.js ) 


import PropTypes from 'prop-types'; 





import React, 1{ Component } from ‘react',; 
import enroute from 'enroute ' : 
import invariant from '‘'invariant'; 


export default class Router extends Component { 
static propTypes = { 
children: PropTypes.array, 
location: PropTypes.string.isRequired 


a 


COnNnstructor(peoBsy 1 
SUDPeI (DLODS).» 


this. routes = {Ys: 
this.addRoutes (props.children); 
this. router = enroute (this.routes); 


} 


addRoute (element, parent) 
const { component, path, children } = element.props; 
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invariant (component, “Route ${path} is missing the "path" property ); 


invariant (typeof path === 'string', Route ${path} is not a String ); 
const render = (params, renderProps) => 1{ 
const finalProps = Object.assign({ params }, this.props, 
renderProps); 


const children = React.createElement (component, finalProps),; 


return parent ? parent.render (params, { children }) : children; 


}; 


const route = this.normalizeRoute (path, parent); 


aE (ehildren) 寺 
this.addRoutes (children, { route, render )}) ; 


this.zoutes [this.cleanPath (route)] = render; 


addRoutes (routes, parent) { 
React.Children.forgach (routes, route => this.addRoute (route, 
parent) ) ; 


} 


cleanPpath (path) { 
return path.replace(/N/\//g, '/"'); 
} 
normalizeRoute (path, parent) | 
if (path[0] === '/') 1 
return path; 
} 
If (!Iparent) { 
return path; 


} 
return ‘${parent.route}/${path}，; 


render() { 
const { locatikon } =: this. props,; 
invariant (location, '‘'<Router/> needs a location to work'); 


TETUFN this router'(locatlLony): 


1.3 小 结 


这 一 草 中 , 我 们 开始 将 React 应 用 从 一 个 带 有 一 些 组 件 的 简单 页 面 转变 成 一 个 处 理 路 由 和 路 
由 配置 的 更 强 的 应 用 。 我 们 介绍 了 很 多 内 容 并 探索 了 如 何 用 组 件 从 头 构建 完成 路 由 右 。 
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现代 客户 端 应 用 中 的 路 由 不 需要 执行 完整 的 页 面 重 新 加 载 。 相 反 ， 它 可 以 被 像 React 这 
样 的 客户 端 应 用 处 理 。 这 可 以 减少 浏览 需 的 加 载 时 间 ， 也 可 能 降低 服务 器 的 性 能 负载 。 
React 没有 像 一 些 框架 那样 内 置 一 个 路 由 库 。 相 反 , 使 用 者 可 以 随意 地 从 社区 选择 一 个 或 
者 从 头 构建 一 个 自己 的 路 由 库 〈 就 像 已 经 做 过 的 那样 ! )。 

React 为 开发 人 员 提供 了 几 个 工具 来 处 理 不 透明 的 children 数据 结构 。 使 用 者 可 以 迭 
代 多 个 组 件 ， 检 查 有 多 少 组 件 ， 等 等 。 

使 用 者 可 以 用 自己 创建 的 路 由 设置 来 动态 更 改组 件 内 演 染 哪个 子 组 件 。 开 发 人 员 要 监听 
浏览 右 中 地 址 的 变化 并 使 用 那些 数据 进行 泻 染 。 


在 第 8 章 中 ， 我 们 将 使 用 Router 组 件 ， 并 用 Firebase 给 应 用 添加 号 份 认 证 功能 。 





第 7 章 从 头 构建 了 一 个 简单 的 路 由 器 以 便 更 好 地 理解 React 应 用 如 何 处 理 路 由 。 这 一 章 将 开 
使 用 之 前 构建 的 路 由 器 并 将 Letters Social 应 用 分 解 为 更 合适 的 部 分 。 本 章 末 尾 , 我 们 将 能 够 导 
航 到 应 用 的 任意 位 置 、 查 看 用 户 发 的 帖子 ， 以 及 进行 用 户 身 份 验证 。 


MW i 


wi 
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8.1 使 用 路 由 器 


上 一 章 用 React 构建 了 一 个 可 以 工作 的 路 由 硕 。 当 致力 于 开发 生产 环境 的 React 应 用 时 ,使 
用 者 也 许 想 选择 React Router 这 样 的 东西 。 笠 好 ，React Router 遵循 非 肖 类 似 的 API, 而 且 它 还 有 
更 高 级 的 功能 ,让 使 用 者 可 以 用 路 由 做 更 多 事情 。 使 用 者 也 许 并 不 需要 全 部 这 些 功 能 ,类 似 之 前 
构建 的 路 由 器 就 已 经 够 用 了 。 这 非常 好 一 一 选择 最 适合 要 解决 的 问题 的 工具 , 而 不 是 选择 拥有 基 
多 GitHub 星 的 或 Hacker News 文 持 的 工具 。 我 们 的 需求 会 在 第 12 草 处 理 服务 硕 冰 泻 染 时 改变 ， 
因此 我 们 会 在 第 12 章 切 换 到 React Router。 

让 我 们 开始 使 用 那个 亮 闪 闪 的 新 路 由 器 。 首 先 需 要 将 路 由 需 与 HIML5 History API 连 接 起 来 ， 
以 便 可 以 利用 导航 而 又 无 须 重 新 加 载 整个 页 面 。 因 为 不 需要 每 次 都 连接 服务 来 刷新 整个 页 面 ， 所 
以 我 们 将 使 用 pushState 导航 。 不 过 也 可 以 使 用 hash-based 路 由 。 

我 们 不 会 花 太 多 时 间 探 索 HTML5 API， 因 为 它们 值得 另 花 时 间 专 门 学 习 。 我 们 将 使 用 知名 
的 history 库 ,， 这 个 库 将 让 使 用 者 以 可 靠 和 可 预测 的 方式 跨 浏 览 絮 使 用 History API。 运 行 npm 
install--save history 来 确保 它 已 经 安装 。 一 旦 安装 好 ， 需 要 对 当前 作为 整个 应 用 根源 的 
index.js 文件 进行 一 些 更 改 。 到 现在 为 止 ， 这 个 文件 是 React DOM 将 整个 应 用 泻 染 到 一 个 DOM 
元 素 的 地 方 。 不 过 我 们 已 经 启用 了 路 由 ， 而 Router 组 件 需要 位 置 (参见 第 7 章 )。 需 要 找到 办 法 
为 Router 组 件 提供 位 置 并 通过 history 库 来 使 用 HTMLS History API, 而 index.js 就 是 做 这 些 的 
绝 佳 位 置 。 






练习 8-1 客户 端 路 由 与 服务 器 端 路 由 对 比 z 
、 SS URL 的 客户 - 由 有 什么 不同 之 处 客户 并 路 由 和 


除 利用 history 之 外 ， 还 需要 设置 路 由 。 为 了 做 到 这 一 点 ， 需 要 重 构 一 些 组 件 ， 这 会 让 使 
用 者 对 React 的 可 组 合 性 与 模块 化 的 好 处 有 所 认识 。 虽 然 会 移动 一 些 东 西 ， 但 不 必 从 根本 上 改变 
组 件 的 工作 方式 。 让 我 们 看 看 首先 如 何 修改 App 组 件 。 它 需要 成 为 装载 子路 由 的 容器 ， 因 为 想 
让 每 个 页 面 拥 有 相同 的 侧 边栏 和 导航 栏 , 只 改变 传递 给 children 属性 的 东西 。 图 8-1 中 的 示例 
展示 了 这 看 起 来 是 什么 样子 。 

如 代码 清单 8-1 所 示 ， 为 了 实现 这 类 骸 套 ， 需 要 重 构 App 组 件 来 动态 地 展示 children。 
音 好 ， 最 终 不 会 删除 太 多 已 经 完成 的 工作 一 一 只 是 将 其 移动 一 下 。 随 着 重 构 ， 将 会 重新 组 织 应 
用 程序 的 文件 。 在 src 目录 中 创建 一 个 叫 作 pages 的 新 目录 我 们 将 会 把 那些 仅 包 含 其 他 组 件 
并 为 其 提供 数据 的 组 件 放 在 这 个 目录 中 。 在 后 续 章节 中 开始 探索 React 应 用 的 架构 时 ， 我 将 更 
多 地 讨论 这 个 想法 。 
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图 8-1 截屏 中 的 框 选区 域 将 依据 基于 URL 要 演 染 的 视图 而 改变 。 随 着 时 间 推 移 ， 甚 至 可 以 做 更 多 敌 套 ， 
并 将 该 区 域 扩 展 到 包含 边栏 ， 以 便 跨 页 面 维 护 相 同 的 导航 栏 以 及 拥有 其 他 具有 动态 区 域 的 路 由 





代码 清单 8-1 重 构 App 组 件 ( src/app.js ) 


LIBGF 记 七 RSacCt { Component } reom 'react"; 
import PropTypes from ‘prop-types'; 


import ErrorMessage from './components/error/Error'; 
import Nav from './components/nav/navbar'; 
import Loader from '‘'./components/Loader'; 


class App extends Component { 
CONSEtEUCEoOr(DPEODSY) 1 
super (Props); 
this.state = { 
SESE Ulli 
loading: false 
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static propTypes = { 


children: PropTypes.node ] 使 用 compomeniDiacaisl 设置 顶级 错误 边 


册 界 ， 以 便于 有 东西 出 错时 能 显示 错误 


componentDidCatch (err, info) { 
console.error (err); 
CONSOLe .error (1nfo); 
this.setState(() => ({ 
error: err 
} 
} 


render() { 如 果 有 任何 错 
if (this State err6r) 并 误 就 展示 错误 
return ( 


<div className="app"> 
<ErrorMessage error={this.state.error} /> 


</div> 
六 
} 
return ( 传人 user 属性 一 一 在 集成 
<div className="app"> 二 Firebase 的 时 候 会 用 到 
<Nav user={this.props.user} /> 


(thisg state oading ? ( _ 
<div className="loading"> 如 朵 应 用 正 处 于 加 载 状态 ， 
<LOader /S 则 展示 一 个 加 载 需 


</diy> 
有 

this.props.children 使 用 props.children 输出 当 
) } 前 活跃 的 路 由 


</divS 
) 


} 


export default App; 


需要 给 主页 面 创建 一 个 组 件 以 便 用 户 可 以 查看 帖子 。 创 建 一 个 名 为 home.js 的 文件 并 将 它 放 
到 pages 目录 中 。 这 个 组 件 看 起 来 应 该 很 熟悉 一 一 它 是 使 用 者 将 内 容 分 解 为 若干 页 面 之 前 拥有 的 
主要 组 件 。 代 码 清单 8-2 展示 了 Home 组 件 ， 其 使 用 了 之 前 已 实现 的 方法 逻辑 ,并 且 为 了 简洁 起 
见 注释 掉 了 这 些 方法 。 记 住 ， 和 所 有 章 一 样 ， 如 果 想 了 解 应 用 是 如 何 变 化 的 或 者 应 用 在 一 章 结束 
时 的 情况 ， 可 以 从 本 书 GitHub 上 检 出 每 章 的 不 同 分 支 。 


代码 清单 8-2 重 构 后 的 Home 组 件 ( src/pages/Home.js) 





import React, { Component } from 'react'; 
Import parseLinkHeader from '‘'parse-link-header'; 
import orderBy from 'lodash/orderBy'; 


i.mBoOrt * as 及 PT from 's. /shared/htte"; 别 忘 了 调整 导 和 路径 一 一 
import Ad from '../components/ad/Ad'; 组 件 位 于 不 同 的 目录 中 
import CreatePost from '../components/post/Create'; 

import Post from '../components/post/Post',; 


import Welcome from '../components/welcome/Welcome'; 
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export class Home extends Component { 
constructor (Props)- -{ 
super (props); 
this.state = { 
BOStss [|],y 
errors Wall, \ 
endpoint: ‘${process.env 


.ENDPOINT}/posts? page=1l& sort=dateg& order=DESC& embed=commentsé& expand= 


user& embed=]ikes 
}; 
this.getPosts = this.getPosts.bind(this); 
this.createNewPost = this.createNewPost.bind(this); 


} 


componentDidMount() { 

this.getPosts(); 
} 这 些 逻 辑 是 完全 相同 的 一 一 只 是 
getPosts() 1 移动 组 件 以 适应 新 的 层次 结构 


API.fetchPosts (this.state.endpoint) 
.then(res => { 
return res.json() .then (Posts => { 
const links = parseLinkHeader (res.headers.get('Link"')); 
this.setState(() => (1 
posts: orderBy (this.state.posts.concat (posts), 
'date', desc"); 
endpoint: links.next.url, 
时 
}); 
}) 
.Catch (err => { 
this.setState(() => ({ error: err })); 
Ps 
} 
createNewPost (post) { 
post.userId = this.props.user.id; 
return API.createPost (post) 
.then(res => res.json()) 
.then (newPost => { 
this.setState (prevState => { 
return 1 
posts: orderBy (prevState.posts.concat (newPost), 
"date", ‘dese") 
}; 
}); 
}) 
.Catch (err => { 
this.setState(() => ({ error: err })); 
}); 
} 
wip 这 些 逻 辑 是 完全 相同 的 ， 只 是 移动 组 


return ‘( 


<div className="home"> 件 以 适应 新 的 层次 结构 


<Welcome /> 
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<div> 
<CreatePost onSubmit={this.createNewPost} /> 
{this.state.posts.l]ength && ( 
<div className="posts"> 
{this.statéeé.posts.map(({ id }) => 1 
return <Post id={id} key={id} 
user={this.props.user} />; 
过 最 
</div> 
) 
<button className="block" onClick={this.getPosts}> 
Load more posts 
</button> 
</diy> 
<div> 
<Ad url="https://ifelse.io/book" 
imageUrl="/static/assets/ads/ria.png" /> 
<Ad url="https://ifelse.io/book" 
imageUrl="/static/assets/ads/orly.jpg" /> 
</div> 
</div> 
); 


} 


export default Home; 


目前 已 经 移动 了 Home 组 件 ， 准 备 配 置 路 由 并 勾 连 history 工具 ， 以 便 路 由 各 能 啊 应 浏 贤 
句 的 地 址 变化 。 将 一 个 模块 作为 实用 方法 提供 给 应 用 程序 的 其 他 部 分 通 第 是 非 第 有 用 的 , 这 样 就 
避免 了 重复 工作 。 本 书后 面 会 做 更 多 这 样 的 事情 ， 而 且 开 发 者 目 己 也 可 能 已 经 这 样 做 了 。 如 代码 
清单 8-3 所 示 ， 我 们 将 这 样 处 理 history 库 ， 因 为 最 终 希 望 (在 其 他 部 分 ) 使 用 它 创建 与 路 由 
需 协 同 工 作 的 链接 而 不 必 使 用 稼 规 的 <a href=""></a> 标 签 。 





代码 清单 8-3 部署 history 库 ( src/history/historyjs ) 


| 建 一 个 《 
import createHistory from ‘history/createBrowserHistory'; 创建 用 于 应 用 的 
const history = CreateHistory () ; jay 


const navigate = to => history.push (to); | 导出 navigate 方法 和 history 实例 (之 
export { history, navigate }; 后 需要 直接 访问 的 情况 ) 


目前 已 经 设置 好 了 history, 可 以 设置 index.js 的 其 余部 分 并 配置 Router, 代码 清单 8-4 展 
示 了 如 何 做 。 N 


代码 清单 8-4 为 路 由 设置 index.js ( srcindex.js ) 





import React from "Teact' ， 导入 React DOM 


ijmport { render } from "Feact-Qom ' ; 
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import { APP } from './pages/App'; 
import { Home } from './pages/Home',; 导 人 App、Home、Router 
import Router from !./components/router/Router'; 及 Route 组 件 
import Route from ' ./components/router/Route ' ; 
Limevrt { history } from YistcEY; 
吐 人 人 刚 创 建 的 history 
import *./shared/crash",; i 
import './shared/service-worker'; 创建 一 个 用 来 演 染 应 
import '‘'./shared/vendor'; 
import './styleés/styles.scss'; 用 程序 的 函数 ， 封 装 
React DOM 的 render 
export const renderApp = (state, callback = () => {}) => 1 方法 以 便 能 传人 地 址 
render ( 数据 和 回调 函数 
<Router {...state}> 
<Route path="" component={App}> 为 App 和 Home 组 件 使 用 JSX 延展 操 
<Route path="/" component={Home} /> 创建 路 由 作 符 “填充 ”作为 
</Route> | Router 属性 的 位 
</Router>, 置 状态 
Qocument .getElementById('app'), 
callback 将 应 用 泻 染 到 index.html 
} 的 目标 DOM 元 素 内 
}; 
a Sbube = 创建 一 个 状态 对 象 来 跟 
location: window.location.pathname, 踪 地 址 和 用 户 


}; 
history.listen(ljocation => 1 A 
state = Object.assign({}, state, 当地 址 变化 时 触发 并 更 新 路 由 顺 ， 
促使 应 用 使 用 新 数据 重新 泻 染 


location: location.pathname 
9 
renderApp (state) ， 
2 


| 演 染 应 用 程序 
renderApp (state); 


8.1.1 创建 帖子 页 面 


路 由 运行 了 ! 至 此 , 已 经 做 了 大 量 工作 来 启用 路 由 并 使 其 在 应 用 中 工作 。 但 还 没有 做 任何 事 
情 来 让 用 户 浏览 应 用 程序 的 不 同 部 分 。 此 刻 ， 应 用 或 许 开 始 拥 有 很 多 页 面 和 页 面 的 片段 。 如 果 正 
在 构建 一 个 更 复杂 的 社交 网 络 应 用 程序 , 或许 会 有 很 多 部 分 用 于 资料 页 、 用 户 设 置 、 消 息 等 。 但 
就 本 例 而 言 ， 需要 做 的 全 部 事情 就 是 显示 用 户 的 帖子 。 打算 如 何 做 ? 从 URL 开始 。 还 记得 到 目 
前 为 止 示例 中 用 了 几 次 的 /posts/:postID 路 由 吗 ? 帖子 页 面 将 会 位 于 这 个 URL 上 。 

首先 将 为 用 户 帖 子 页 面 创 建 页 面 组 件 开 始 。 前 面 几 章 构 建 了 一 个 Post 组 件 ， 它 会 在 加 载 后 
获取 数据 ， 因 此 创建 这 个 单 篇 帖子 页 面 应 该 不 会 太 麻 烦 。 我 们 想 给 这 个 页 面 创 建 一 个 新 组 件 ， 确 
保 包含 帖子 组 件 ， 并 且 确 保 把 它 映射 到 正确 的 路 由 。 有 一 点 不 同 的 是 从 何 处 获得 帖子 的 ID。 我 
们 会 从 URL 拉 取 到 帖子 的 ID ， 而 不 是 一 上 来 先 访问 服务 器 获取 。 我 们 曾 用 特定 的 语法 设置 URL， 
路 由 帮会 将 参数 化 路 由 的 数据 提供 给 组 件 。 代 码 清单 8-5 展示 了 如 何 设置 单 篇 帖子 页 面 。 
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代码 清单 8-5 创建 SinglePost 组 件 ( src/pages/Post.js ) 


import PropTypes from "prop-types'’ 





import React, { Component } from 'react'; 
import Ad from '../components/ad/Ad'; 
import Post from '../components/post/Post'; 


export class SinglePost extends Component 1{ 
static propTypes = 1{ 


导 人 前 几 章 中 创建 的 
params: PropTypes.shape ({ Post 组 件 
postId: PropTypes.string.isRequired 


} ) 
} 


render() { 
return ( 从 路 由 器 传 人 的 属 
<div className="single-post"> 性 中 获取 帖子 ID 
<Post id={this.props.params .postId} /> 
<Ad 
url="https://www.manning.com/books/react-in-action" 
imageUrl="/static/assets/ads/ria.png" 
/法 
< 


)? 
} 


export default SinglePost; 


现在 有 一 个 可 以 用 的 组 件 了 ,把 它 集成 到 路 由 器 中 以 便 用 户 能 够 导航 到 帖子 页 面 。 代 码 清 单 8-6 
展示 了 如 何 将 SinglePost 组 件 添加 到 路 由 右 。 注 意 ， 我 们 正在 利用 在 路 由 器 示例 中 所 看 到 的 参数 
化 路 由 。 路 径 的 :post 部 分 会 通过 params 属性 传递 给 组 件 。 


代码 清单 8-6 ”添加 用 户 帖 子 到 路 由 器 ( src/index.js ) 


import React from "Teact ' ; 
import { render } from 'react-dom'; 





import * as API from './shared/http'; 
NDOrt Nistory } from "Ahistory's 


Import Route from '‘'./components/router/Route'; 

import Router from './components/router/Router'; 

import App from './app'; 导入 路 由 硕 使 用 的 
import Home from './pages/home'; SinglePost 组 件 


import SinglePost from './pages/post'; 
二 


export const renderApp = (state, callback = () => {}) => 1 
render!l 
<Router {...state}> 
<Route path="" component={App}> 
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<Route path="/" component={Home} /> 
<Route path="/posts/:postId" component={SinglePost} /> 


</Route> 
</Router>, 使 用 特定 的 参数 化 
document .getElementById('app'), 让 ; 
it ( :post 
callback 路 由 请 法 b ) 配 


y \ 置 SinglePost 路 由 
ys 


i 


8.1.2 创建 <Link /> 组 件 


如 有 果 在 开发 模式 下 运行 应 用 并 试 着 四 处 点 点 ,你 会 注意 到 , 即使 为 用 户 帖 子 页 面 设置 了 路 由 ， 
只 要 没有 一 开始 就 知道 帖子 ID 并 将 其 置 于 URL 中 ， 就 无 法 去 到 那里 。 那 不 是 很 有 用 ， 对 吧 ? 
: 我 们 需要 创建 一 个 和 目 定 义 的 Link 组 件 来 与 history 工具 和 路 由 需 协 同 工 作 , 否则 , 用 户 会 
很 快 抛弃 这 个 应 用 ， 而 投资 者 会 非常 租 形 。 要 如 何 实现 ? 普通 的 链接 标签 (<a href= 
"/">Link!</a>) 是 不 能 用 的 ， 因 为 它 会 答 试 重 载 整 个 页 面 ， 这 不 是 我 们 想 要 的 。 我 们 想 不 用 
链接 标签 来 创建 链接 ， 例 如 ， 不 想 用 链接 标签 包 右 列表 中 的 帖子 或 其 他 的 东西 。 


注意 可 访问 性 是 指 一 个 界面 可 以 被 人 使 用 的 程度 。 也 许 之 前 听 到 过 人 们 讨论 “Web 可 访问 性 ”， 
但 可 能 知道 的 并 不 多 。 没 关系 一 一 它 很 容易 学 习 。 人 们 想 要 确保 应 用 对 尽 可 能 多 的 人 是 可 用 的 , 无 
论 他 们 是 使 用 鼠标 和 键盘 、 屏 幕 阅读 器 还 是 使 用 其 他 设备 。 我 刚 提 到 过 ， 使 用 Link 组 件 可 以 让 应 
用 程序 的 任意 元 素 都 可 以 寻 航 一 一 这 是 从 可 访问 性 的 角度 来 处 理 时 要 小 心 应 对 的 事情 。 考虑 到 这 一 
点 ， 我 只 想 针 对 本 书简 单 地 提 一 下 可 访问 性 。 因 为 构建 可 访问 的 Web 应 用 是 一 个 庞大 而 重要 的 话 
题 ， 它 超出 了 本 书 的 范围 。 一 些 公司 、 应 用 程序 以 及 业余 项 目 都 将 它 视 为 工程 的 头等 大 事 。 虽然 人 
们 可 以 参考 Letter Social 的 源 代 码 作为 使 用 React 组 件 构建 应 用 程序 的 方法 源泉 ， 但 我 们 并 没有 处 
理应 用 程序 可 能 直到 的 所 有 不 同 的 可 访问 性 问题 。 为 了 从 网 上 学 习 更 多 关于 可 访问 性 的 知识 ， 查 看 
WAI-ARIA 创作 实践 或 者 有 关 ARIA 的 MDN 文档 。Ari Rizzitano 还 就 这 一 话题 进行 了 精彩 的 演讲 ， 
特别 关注 了 React 的 可 访问 性 ， 该 演讲 叫 作 “构建 可 访问 的 组 件 ”。 


这 里 会 再 次 使 用 history 实用 方法 并 将 其 集成 到 Link 组 件 中 ,以便 在 应 用 程序 中 可 以 使 用 
push-state 进行 链接 。 还 记得 早 些 时 候 公 开 过 的 navigate 困 数 吗 ? 现在 用 这 个 困 数 可 以 通过 程 
序 的 方式 告诉 history 库 为 用 户 更 改 地 址 。 为 了 将 这 个 功能 添加 到 组 件 中 ， 我 们 将 使 用 一 些 
React 工具 把 其 他 组 件 包 装 在 可 点 击 的 Link 组 件 中 。 我 们 可 以 使 用 React .clLloneElement 来 
创建 目标 元 素 的 副本 , 然后 附加 执行 导航 功能 的 点 击 处 理 程 序 。React .cloneElement 的 签名 
看 起 像 下 面 这 样 : 


ReactElement cloneElement( 
ReactElement element, 
[object props], 
[Ge .1] 

) 
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它 接 收 一 个 要 克隆 的 元 素 、 要 合并 到 新 元 素 的 props， 以 及 它 应 该 有 的 任何 childqren。 我 
们 将 使 用 这 个 实用 方法 来 克隆 想 要 封装 到 Link 的 组 件 ， 并 且 需 要 确保 Link 组 件 仅 有 一 个 子 组 件 ， 
所 以 要 从 前 几 章 中 找 回 React .children.only 工具 。 总 之 , 这 些 工 具 会 让 使 用 者 将 其 他 组 件 转 
换 为 Link 组 件 ， 从 而 帮助 用 户 在 应 用 中 进行 跳 转 。 代 码 清单 8-7 展示 了 如 何 创 建 Link 组 件 。 





代码 清单 8-7 创建 Link 组 件 ( src/components/router/Link.js ) 
Import { PropTypes, Children, Component, cloneElement } from "Teact ' ; i 


import { navigate } from '../../history.- 复 用 一 吉 在 用 的 的 库 


history 工具 


class Link extends Component { 
static propTypes = { 


ei ty ping to 和 children 属性 会 分 别 保存 目标 
| sw | URL 和 Link 化 的 组 件 


} 

| 克隆 Link 组 件 的 子 组 件 来 包 里 仅 有 的 一 个 

render() { oe de 
const { ta, children } = this.props; 点 〈 它 可 以 有 子 组 件 ) 


return cloneElement (Children.only(children), 1 
onClick: () => navigate (to), 在 props 对 象 中 ， 传 人 onClick 
2 定义 propTypes 处 理 程序 , 其 会 使 用 history 进 
| } 行 URL 导航 


import PropTypes from '‘'prop-types'; 


import { Children, cloneElement } from 'react'; ] 隆 人 需要 的 库 
import { navigate } from '../.。./history's 
复 用 一 直 在 用 的 
history 工具 
Lunction. Lank(t to hilidren }) 作 有 
return cloneElement (Children.only (children), i 有 
onClick: () => navigate (to) 克隆 Link 组 件 的 子 组 件 来 包 
}); 里 仅 有 的 一 个 节点 ( 它 可 以 有 
} 子 组 件 ) 
Link.propTypes = { | 定 
to: PropTypes.string, 定义 propTypes 在 props 对 象 中 ， 传 入 onClick 处 理 程 
children: PropTypes.node 序 ， 其 会 使 用 history 进行 URL 导航 


} 7 


export default Link; 


to 和 children 属性 会 分 别 保存 目标 
URL 和 Link 化 的 组 件 | 
为 了 集成 Link 组 件 , 可 以 将 用 户 帖 子 包 庄 在 可 复 用 的 Post 组 件 中 并 确保 Link 可 以 获取 将 用 
户 送 到 正确 页 面 的 to 属性 (看 看 之 前 关于 可 访问 性 的 注意 事项 )。 我 们 能 够 按照 相同 的 模式 以 
类 似 的 方式 来 包裹 其 他 组 件 并 将 它们 转换 为 Link 化 的 组 件 。 代 码 清单 8-8 展示 了 如 何 集成 Link 
组 件 。 
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代码 清单 8-8 ”集成 Link 组 件 ( src/components/post/Post ) 


import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 


imBorE * as API freom "s/s so/ hared/http';y 

import Content from './Content'; 

import Image from './Image'; 

import Link from 1 /Link", 

import PostActionSection from './PostActionSection'; 

import Comments from '../comment/Comments'; 

import DisplayMap from '../map/DisplayMap'; 导入 Link 组 件 , 给 它 取 一 个 别名 

import UserHeader from '../post/UserHeader'; 叫 RouterLink， 从 而 避免 与 帖子 
中 使 用 的 Link 组 件 的 命名 冲突 

import RouterLink from '.: /router/Link"'; 


export class Post extends Component { 
着 


render() 1{ 
return this.state.post ? ( 
<div className="post"> 
<RouterLink to={ /posts/${this.state.post.id} }> 


<span> 包 于 想 要 

<UserHeader date={this.state.post.date)} 链接 化 的 

User={this. state.post.user} /> Post 组 件 
<Content post={this.state.post} /> 的 部 分 并 

<Image post={this.state.post} /> Ar 担任 

<Link link={this.state.post.link} /> 给 它 提供 

</span> 正确 的 ID 

</RouterLink> 


{this.state.post.location && <DisplayMap 
location={this.state.post.]location} />} 
<PostActionSection showComments={this.state.showComments} /> 
<Comments 
comments={this.state.comments} 
show={this.state.showComments} 
post={this.state.post} 
handleSubmit={this.createComment)} 
user={this.props.user)} 


”be 


export default Post; 


如 此 就 将 Router 完全 集成 到 应 用 中 了 。 用 户 现在 可 以 查看 帖子 ， 这 对 于 一 次 分 享 和 关注 一 
个 帖子 非常 不 错 。 投 资 者 会 对 此 留 下 不 错 的 印象 并 期 竺 在 下 一 轮 融 资 时 投资 你 。 不 过 我 们 还 设 做 
完 。 下 一 节 会 讨论 当 无 法 匹配 URL 到 组 件 时 该 做 什么 。 
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多 可 8-2 添加 更 多 链接 

”尝试 寻找 应 用 程序 中 其 他 一 些 非常 合适 成 为 Link 的 区 域 并 使 用 Link 组 件 将 它们 转换 为 链接 。 提 示 : 
用 户 在 导航 到 帖子 页 面 之 后 该 如 何 回 到 主页 ” 随 着 学 习 的 进行 ， 尝 试 考虑 用 户 在 应 用 中 跳 转 时 的 体验 。 
什么 对 他 们 是 有 意义 的 ? 要 把 哪些 转换 成 Link? 是 否 有 这 样 的 情况 : 转换 为 Link 组 件 的 东西 并 不 是 已 有 
的 链接 标签 ? 检 出 应 用 程序 源 代码 的 单个 帖子 页 面 ， 看 看 添加 简单 返回 按钮 的 示例 。 


8.1.3 ”创建 <NotFound /> 组 件 


尝试 在 Letters 应 用 程序 中 导航 到 /oops， 看 看 会 发 生 什 么 ? 什么 都 没有 ? 是 的 ， 这 就 是 基于 
代码 应 该 发 生 的 事情 , 但 这 并 非 我 们 想 呈 现 给 用 户 的 。 现在, 路 由 需 组 件 不 会 处 理 任何 “未 找到 ” 
或 “全 部 捕获 ”路 由 。 想 要 对 用 户 友好 并 假定 他 们 (或 者 自己 ) 会 犯错 误 并 尝试 导航 到 应 用 程序 
不 存在 的 路 由 中 。 为 了 解决 这 个 问题 ， 我 们 创建 一 个 简单 的 NotFound 组 件 ， 并 在 创建 Router 实 
例 的 时 候 配 置 它 。 代 码 清 单 8-9 展示 了 如 何 创 建 NotFound 组 件 。 





代码 清单 8-9 创建 NotFound 组 件 ( src/pages/404.js ) 


已 他 ! 3 大 攻 组 件 
import React from '‘'react'， 导 人 已 创建 的 Link 组 作 ， 
import Link from '../components/router/Link'; ls 
export const NotFound = () => { | : a 

return ( Ta, 所 以 创建 
<div className="not-found"> 一 个 无 状态 田 数 组 件 
<h2>Not found : (</h2> 
<Link to="/"> pe 
<button>go back home</button> 使 用 Link 组 件 让 用 
</Link> 户 返回 主页 


</div> 
}; 
export default NotFound,; 


现在 ，NotFound 组 件 已 经 有 了 ， 需 要 将 它 集成 到 Router 配置 中 。 你 也 许 想 知道 ， 要 如 何 告 
诉 Router: 它 应 该 将 用 户 送 到 NotFound 组 件 。 答案 是 , 在 配置 路 由 器 时 使 用 * 字 符 。 这 个 字符 意 
“匹配 任何 东西 "， 如 果 把 它 放 在 配置 的 未 尾 ， 所 有 没有 匹配 到 任何 东西 的 路 由 都 会 走 到 这 

。 一 定 要 注意 ， 在 这 里 顺序 很 重要 : 如 果 把 全 部 捕获 路 由 放 得 过 高 ， 它 会 匹配 上 任何 东西 ， 而 
i a 代码 清单 8-10 展示 了 如 何 给 路 由 耸 配 置 更 多 路 由 。 


代码 清单 8-10 ”添加 单个 帖子 到 路 由 器 中 ( src/index.js ) 


import NotFound from '‘'./pages/404 ' 





导入 NotFound 
| 组 件 
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export const renderApp = (state, callback = () => {}) => 1 
renderl( 
<Router {..-state.}> 
<Route path="" component={App}> 


<Route path="/" component={Home} /> 
<Route path="/posts/:postId" component={SinglePost} /> 
<Route path="*" component={NotFound} /> 


</Route> 配置 NotFound 组 件 的 
</Router>, 路 由 ， 以 便 其 作为 一 
document .getElementById("'app'), Pa 
ep 六 全 部 匹配 的 路 由 


} ; 
££ 
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随 着 路 由 融 完 善 并 运作 起 来 , 我 们 还 想 在 本 章 解 决 一 个 以 前 无 法 解决 的 问题 : 启用 用 户 登 录 
和 号 份 验证 。 我 们 将 使 用 流行 且 易 用 的 “后 端 即 服 务 ” 平 台 Firebase 来 完成 它 。Firebase 提供 的 
服务 抽象 或 替代 了 用 于 处 理 用 户 数据 、 身 份 验证 以 及 其 他 关注 点 的 后 端 API。 就 我 们 的 目的 而 言 ， 
可 以 将 Firebase 视 为 后 端 API 的 简易 替代 。 

我 们 不 会 使 用 Firebase 完全 替换 应 用 的 后 端 (仍然 会 使 用 自己 的 API 服务 器 )， 但 会 使 用 Firebase 
来 处 理 用 户 登 录 和 用 户 管理 。 在 开始 使 用 Firebase 之 前 ， 如 果 还 没有 账户 就 创建 一 个 。 一 旦 注册 好 ， 
转 去 Firebase 控制 台 并 创建 一 个 用 于 Letters Social 的 新 项 目 。 一 旦 完成 , 点 击 “Add Firebase to Your Web 
App” 按 钮 打开 一 个 模 态 窗口 ， 会 看 到 一 些 将 被 用 到 的 应 用 配置 信息 ， 人 参见 图 8-2。 


Your Sregects CTE 下 PT 人 Ge oom 


Do soe y09 Projects from Febase eo? CU Bere IO TH your 000Um 


8-2 ”Firebase 控制 合 。 创 建 用 于 Letters Social 应 用 实例 的 新 项 目 
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图 8-2 ”Firebase 控制 人 台 。 创 建 用 于 Letters Social 应 用 实例 的 新 项 目 ( 续 ) 


一 旦 创建 了 项 目 并 且 可 以 访问 项 目的 配置 值 ， 就 准备 好 开始 了。Firebase SDK 已 经 随 示例 应 
用 代码 一 起 安装 了 ， 因 此 可 以 继续 ， 并 在 .src 下 的 backend 新 目录 中 创建 名 为 core.js 的 新 文件 
( src/backend/core.js )。 代 码 清单 8-11 展示 了 如 何 使 用 应 用 配置 的 值 来 设置 core.js。 我 已 经 在 源 代 
码 中 包含 了 公开 的 Firebase API 键 ， 以 便 你 能 在 没有 账户 的 情况 下 运行 应 用 ， 但 如 果 你 想 蔡 换 成 
目 己 的 键 ， 可 以 很 容易 地 修改 配置 目录 中 的 值 。 





代码 清单 8-11 配置 Firebase 后 端 ( src/backend/core.js ) 


import firebase from '‘'firebase'; 


i a 
const config = { et 


apiKey: process.env.GOOGLE _API_KEY， ed 
\ MT A = hy 、 
authDomain: process.env.FIREBASE AUTH_ DOMAIN 目 己 的 ,改变 配 置 目录 中 的 什 
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Er 使 用 上 自己 的 凭证 来 
firebase.initiaiizeApp (config); 初始 化 Firebase 

} Catch (tey 1 
Console .error( "Error initlializing firebase — Check your source code"); 


Console.error (e);，} 


| 
导出 配置 好 的 firebase 实 


export { firebase }; 例 以 便 在 其 他 地 方 使 用 


由 于 要 用 Firebase 做 身份 验证 ， 因 此 需要 设置 一 些 代 人 码 来 利用 这 项 功能 。 如 图 8-3 所 示 ， 开 
始 使 用 之 前 ， 先 选择 一 个 要 使 用 的 身份 验证 平台 。 选 择 GitHub 、Facebook 、Google 或 者 Twitter， 
会 让 已 经 拥有 这 些 账 号 的 用 户 直 接 登 录 ， 而 无 须 管理 男 一 套用 户 名 /密码 。 因 为 访问 应 用 的 大 多 
数 用 户 可 能 都 有 GitHub 账号 ， 所 以 我 建议 选择 GitHub， 不 过 你 可 以 完全 自由 地 设置 一 个 或 者 多 
个 其 他 平台 来 用 。 人 简单 起 见 ， 我 将 在 示例 中 使 用 GitHub。 一旦 确定 ,点击 选择 供应 商 并 遵照 指 
示 进 行 平台 设置 。 


Ld 


cn 
fm 
Bi 
Ow 
[ An 


OAuth red dormsi {0 


DD BOMAIN 





图 8-3 使 用 Firebase 设置 身份 验证 方法 。 导 航 到 身份 验证 部 分 ， 然 后 选择 社交 供应 商 。 接 着 遵照 所 选择 
的 社交 身份 验证 者 的 指示 ， 确 保 Firebase 可 以 访问 正确 的 认证 信息 来 使 用 所 选择 的 平台 进行 身份 验证 


设置 好 与 Firebase 一 起 使 用 的 平台 之 后 ， 需 要 设置 更 多 代码 ， 以 便 与 Firebase 交互 来 执行 用 
户 登 录 。Firebase 附 珊 了 可 以 使 用 各 种 社交 平台 进行 身份 验证 的 内 置 工具 。 如 前 所 述 ， 我 会 使 用 
GitHub ， 你 可 以 自由 使 用 自己 设置 的 任何 一 个 或 者 多 个 供应 商 。 它 们 都 遵循 相同 的 模式 〈 如 创建 
供应 商 对 象 、 设 置 作用 域 等 )。 代 码 清 单 8-12 展示 了 如 何在 src/backend/auth.js 文件 中 设置 身份 验 
证 实用 工具 。 我 们 会 创建 函数 获 取 用 户 和 token 以 及 登录 和 登 出 。 
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代码 清单 8-12 ”设置 身份 验证 工具 ( 


src/backend/auth.js ) 





import { f14rebase } from './core'; | 导 人 最 近 配 置 的 Firebase 库 
const github = new firebase.auth.GithubAuthProvider(); 0 
github.addScope('user:email'),; es 
Ww VE /YL 
export function logUserOut() { 
return tirebase.auth() .signOut(); 创建 包装 了 Firebase 的 登 
} 出 方法 的 函数 
export function loginWithGithub() { 创建 简单 的 loginWithGithub 实 
return firebase.auth() .signInWithPopup (github); 用 方法 ， 其 返回 一 个 Firebase 身 
份 验证 操作 的 Promise 
export function getFirebaseUser() { 


return new Promise (resolve => firebase.auth() .onAuthStateChanged (user 三 > 
resolve (user)));} 


; 创建 获取 Firebase 用 户 的 包装 方法 
八 征 EE 》 
export function getFirebaseToken() ({ i token ， 所 以 创建 
Const currentUser = firebase.auth() .currentUser; 一 个 帮助 获取 token 的 方法 
if (!IcurrentUser) { 


return Promise.resolve (null);} 
} 


return currentUser.getIidToken (七 Tue) ; 


} 


现在 ， 所 有 一 切 都 已 准备 就 纤 了 ， 我 们 可 以 创建 一 个 处 理 登 录 的 新 组 件 。 创 建 一 个 名 为 
src/pages/Login.js 的 新 文件 。 我 们 会 在 这 个 文件 中 创建 一 个 告诉 用 户 如 何 登 录 Letter Social 的 简 
单 组 件 。 代 码 清 单 8-13 展示 了 Login 页 面 组 件 。 





代码 清单 8-13 Login 组 件 ( src/pages/LoginJjs ) 


import 有 eact，({ Component } from ‘react"; 


1mSo0rt { history } from " vy/hlistory"; 导入 该 组 件 
import { LoginWithGithub } from '../backend/auth'; be , 
import Welcome from '../components/welcome/Welcome',，; 需要 的 库 


export Class Login extends Component { 

CONstrictor (brons). 4 

super (props); 

this.login = this. login.bina (this);? ; 
} 创建 并 绑 定 login 
Login() # 方法 

loginWithGithub() .then(() => { 

histmryv .Bust A ys 


ys 使 用 之 前 创建 的 包装 方 
} 法 来 用 GitHub 登录 
render() 1{ 


returm 【 
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<div className="welcome-container" 或 者 任何 其 他 使 用 者 喜欢 的 东西 


-<Welcome /> 
</diyv> 


re <div className="providers"> 


<div className="]login"> | 泻 染 Welcome 组 件 ( 包含 在 源 代码 中 ) 
> 


登录 按钮 时 登录 <button onClick={this.login}> 
-i i <i className={ “fa fa-github `} /> log in with Github 
小 从 袖 沽 
方法 会 被 调用 </button> 
</div> 
</div> 


} 


export default Login; 


确定 用 尸 已 登录 


后 一 项 任务 是 确保 将 未 经 身份 验证 的 用 户 重 定向 到 登录 页 。 鉴 于 当前 应 用 程序 的 状 

况 ， i 出 没有 什么 区 别 ， 因 为 他 们 只 能 看 到 一 些 与 真实 生活 台 无 关系 的 假 

数据 ( 他 们 只 是 很 高 兴 看 到 所 有 “星球 大 战 ” 的 随机 语录 和 和 角色 )。 但 在 生产 情形 中 ,很 可 

能 绝对 需要 用 户 在 拥有 账号 并 已 登录 的 情况 下 才能 查看 数据 ， 这 几乎 是 所 有 Web 应 用 程序 

的 基本 需求 。 即 使 我 们 这 里 不 重点 关注 安全 ， 我 们 也 需要 确保 只 有 用 户 成 功 登 录 才 能 查看 

区 网 络 。 

有 不 同 的 方法 可 用 来 实现 这 种 功能 。 在 像 React Router 这 样 更 为 健壮 和 成 熟 的 工具 中 ,拥有 

当 导 航 到 特定 的 路 由 时 能 够 执行 的 钧 子 限 o 这 只 

是 一 种 方法 ， 而 且 我 们 并 没有 在 Router 组 件 中 设置 钩子 图 数 的 功能 , 但 可 以 回 主 文件 (index.js ) 

添加 一 些 逻 辑 来 检查 用 户 的 在 线 状态 并 决定 应 该 将 他 们 路 由 到 哪儿 去 。 后 续 章 节 会 过 渡 到 使 用 
React Router 和 这 些 钩子 图 数 。 我 们 还 需 将 Login 组 件 添 加 到 Router 中 。 





练习 8-3 Firebase 的 替代 品 
在 本 书 中 ， 我 们 将 Firebase 作为 “后 端 即 服务 ” 来 使 用 。 这 极 大 地 简化 了 学 习 ， 但 这 并 非 团队 的 做 
事 方式 。 无 须 深 入 ， 想 想 应 用 可 以 用 什么 可 以 取代 Firebase? / 


当 用 户 登 录 之 后 , 我 们 想 要 确保 他 们 也 会 用 目 己 的 API 被 记录 下 来 。 我 们 使 用 Firebase 进行 
身份 验证 , 但 仍 想 存 储 用 户 信 息 以 便 他 们 能 够 发 帖 和 评论 以 及 点 赞 ( 后续 章节 中 会 添加 评论 和 点 
竺 功能 )。 首 先 ， 需 要 检查 用 户 是 否 存 在 ， 如 果 他 们 不 存在 ， 就 需要 将 他 们 创建 为 系统 的 用 户 。 
我 们 构建 出 来 的 身份 验证 逻辑 会 把 这 些 全 都 考虑 在 内 。 我 们 还 将 稍微 修改 浏览 磺 历 史 监 听 天 明 
数 ， 以 便 它 能 根据 用 户 是 否 登 录 来 对 其 进行 重 定 问 。 

代码 清单 8-14 展示 了 如 何在 应 用 的 主 入 口 文 件 ( src/index.js ) 中 添加 这 段 逻 辑 并 修改 历史 
监听 和 需 。 
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代码 清单 8-14 将 Login 容器 添加 到 Router ( src/index.js ) 





export const renderApp = (state, callback = () => {}) => ({ 
renderl 
<Router {...state}> 
<Route path="" component={App}> 


<Route path="/" component={Home} /> 
<Route path="/posts/:postId" component={SinglePost} /> 
<Route path="/login" component={Login} /> 


<Route path="*" component={NotFound} /> 添加 Login 
</Route> 页 的 路 由 
</Router>, 
document .getElementBylId('app'), 
callback 


党 


let state = { 
location: window.location.pathname, 


SET 1 
authenticated: false, 跟 踊 用 户 并 相应 地 更 新 
profilePicture: null, 所 创建 的 状态 对 象 
Gs mi 


name: null, 
token: null 


2 
renderApp (state) ; 


history. listen (location => 1 
const user = firebase.autht{) .currentUser; | 
‘LOG 


在 历史 监听 天 中 ， 首 先 检 


state = Object.assign({}, state, 


location: user ? location.pathname 查 是 否 有 Firebase 用 户 
Fi 
renderApp (State) ; 
firebase.auth() .onAuthStateChanged(async user => { 使 用 async 函数 来 响应 Firebase 
i (laser) 1 用 户 状态 的 变更 
state = { 
location: state.location, 
NR 如 果 没 有 用 户 , 更 新 状态 并 适 
authenticated: false 
当地 泻 染 应 用 程序 
}; 
return renderApp(state, () => |{ 
history. pusly( 三 \ 
}); 如 果 有 用 户 ， 使 用 await 和 我 们 创建 的 
| Firebase 实用 方法 来 获取 他 们 的 token 


const token = await getFirebaseToken() :; 
const res = await API.loadUser (user.uid); 


”| 尝试 人 我 们 的 API 加 载 用 户 信息 
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let renderUser; 如 果 没 有 用 户 声明 一 个 要 赋 
if (res.status === 404) { < 一 一 一 需要 注册 他 们 值 的 用 户 变量 
const userPayload = { 
name: user.displayName, | 
profilePicture: user.photoUuRL,, 创建 API 能 理解 
id: user.uid 的 用 户 载 答 
和 和 
renderUser = await API.createUser (userPayload) .then (es => reSs.]json()):; 
} else 1 将 请 求 发 送 给 
renderUser = await res.json(); 如 果 用 户 已 经 存在 ,用 API 并 使 用 响应 


| 它们 泻 染 应 用 程序 


history. buht /ti 


state = Object.assign({}, state, { 
user: { | 将 用 户 推 送 到 主页 


name: renderUser.name, 
小 太 
id: renderUser.id, 更 新 应 用 状态 


profilePicture: renderUser.profilePicture, 
authenticated: true 


}, 


token 


Es 使 用 新 状态 泻 染 
renderApp (State) ; 应 用 程序 
} ); 
现在 用 户 可 以 登录 并 已 拥有 为 其 动态 创建 的 账号 。 我 们 应 该 更 新 导航 栏 以 便 用 户 知道 如 何 登 
录 而 且 也 能 够 看 到 登 出 选项 。 也 许 还 记得 在 前 几 章 中 曾 将 user 属性 传 给 Navbar 组 件 ， 尽 管 那 
时 user 属性 还 不 存在 。 现在 有 了 , Navbar 组 件 可 以 根据 用 户 的 身份 验证 状态 有 条 件 地 显示 不 同 
的 视图 。 代 码 清单 8-15 展示 了 如 何 对 Navbar 组 件 进行 这 些 修改 。 


代码 清单 8-15 ”更 新 Navbar 组 件 ( src/components/nav/navbar.js ) 





import React from ‘react'; 
import PropTypes from ‘prop-types'; 


import Link from '../router/Link'; 
import Logo from './l10g0'’:; 
import 1{ looUserQut } from '../=. Tbackened/auth'; 
export const Navigation = ({ user }) => ( 
<nav className="navbar"> 
<Logo /> 
{user.authenticated ? ( 
<span className="user-nav-widget"> 如 果 用 户 通 过 了 身份 验 
<span>{user.name}</span> 证 ， 就 展示 他 们 的 档案 信 
<img width={40} className="img-circle" 息 (姓名 、 资 料 图 片 ) 


src={user.profilePicture} alt={user.name} /> 
<span onClick={() => logUserOut () }> 


<i className="fa fa-sign-out" /> 为 用 户 提 供 登 出 选项 
</span> (使 用 我 们 先前 创建 
</span> 如 果 他 们 没有 登录 ， 展 示 的 Firebase 实用 方法 ) 
二 办 一 个 登录 链接 


<Link to="/login"> 
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«button tyee="LBUuttorn"SLeg 1n Or Slon vB</button> 


</hink> 
) } 
</nav> 
这 
Navigation.propTypes = { 声明 组 件 属 性 的 
user: PropTypes. shape'(t{ 数据 结构 


name: PropTypes.string, 
authenticated: PropTypes .bool, 
profilePicture: PropTypes.string 
}) .isRequired 
}; 
导出 组 件 以 
export default Navigation; 便 使 用 


8.3 ”小 结 


本 草 开 始 使 用 之 前 构建 的 Router 组 件 ， 还 在 应 用 程序 中 添加 了 一 些 路 由 相关 的 组 件 ， 进 行 
了 一 些 重 构 ， 并 添加 了 使 用 Firebase 进行 的 用 户 身 份 验证 。 下 面 是 要 记 住 的 一 些 事情 。 
图 Firebase 是 一 个 “后 端 即 服务 ”工具 ， 让 使 用 者 验证 用 户 、 存 储 数据 等 。 它 可 以 让 使 用 
者 在 没有 后 端 开 发 的 情况 下 做 很 多 事情 ， 它 也 是 很 多 业余 爱好 项 目的 好 起 点 。 
国 可 以 将 浏览 硕 的 History API 与 路 由 需 集 成 。 这 也 让 使 用 者 能 够 创建 奉 代 常规 链接 标签 且 
无 有 顷 重 新 加 载 整个 页 面 的 Link 组 件 。 
国 Firebase 可 以 帮 使 用 者 处 理 身 份 验证 和 用 户 会 话 数据 。 在 后 续 章 节 中 ， 当 我 们 研究 Flux、 
Redux, 甚至 在 服务 做 端 使 用 Firebase 进行 服务 顺 端 泻 染 时 , 将 探索 处 理 这 种 状态 变化 的 
更 高 级 的 方法 。 
测试 是 开发 优秀 软件 的 一 个 至 关 重 要 的 部 分 。 在 第 9 章 中 ,我们 将 看 到 如 何 使 用 Jest 和 
Enzyme 来 测试 React 组 件 。 


第 9 章 测试 React 组 件 


本 章 主要 内 容 

壮 测试 前 端 应 用 程序 
图 ”搭建 React 测试 
图 ”测试 React 组 件 
加 ”搭建 测试 覆盖 率 


我 们 在 上 一 章 为 应 用 程序 添加 了 一 些 重要 功能 ， 它 现在 拥有 路 由 和 用 户 状态 ,而 且 已 经 被 
分 解 成 更 小 的 部 分 。 我 们 甚至 添加 了 一 些 基本 身份 验证 以 便 用 户 可 以 使 用 GitHub 账号 登录 。 
应 用 开始 变 得 更 加 健壮 ， 即 便 它 可 能 不 会 让 Facebook 或 Twitter 的 任何 人 感到 担心 。 现 在 可 以 
用 React 做 更 多 的 事情 。 但 是 ， 当 我 们 专注 于 学 习 基 础 知识 时 ， 却 忽略 了 开发 过 程 的 一 个 重要 
环 玫 一 一 测试 。 

我 没有 从 一 开始 就 涵盖 测试 是 为 了 避免 同时 学 习 React 和 测试 的 基础 知识 而 让 大 脑 超 负荷 ， 
但 这 并 不 意味 着 它 是 学 习 或 Web 开发 中 不 重要 的 部 分 。 我 们 在 本 章 中 会 关注 测试 ， 因 为 它 是 开 

高 质量 软件 解决 方案 的 基本 部 分 , 但 不 会 演示 每 个 组 件 的 测试 ,而 是 仔细 研究 一 个 具有 代表 性 

的 示例 ， 以 便 谈 者 理解 起 作用 的 重要 原则 ， 并 能 够 编写 自己 的 测试 。 

到 本 章 结 束 ， 我 们 会 了 解 一 些 测 试 Web 应 用 程序 的 基本 原则 。 我 们 还 会 搭建 测试 和 测试 运 
行人 天 ,使 用 Jest、Enzyme 以 及 React 测试 泻 染 器 ， 然 后 学 习 使 用 和 理解 测试 覆盖 率 工 具 。 我 们 将 
装备 好 开始 测试 应 用 程序 ， 这 将 为 我 们 学 习 React 开发 技能 增加 男 一 层 信心 。 


如 何 获取 本 章 代码 re 
和 每 章 一 样 ， 读 者 可 以 去 GitHub 仓库 检 出 源 代码 。 如 果 想 从 头 开 始 编 写本 章 代 码 ， 可 以 使 用 第 7 章 
和 第 8 章 的 已 有 代码 ( 如 果 跟 着 编写 了 示例 ) 或 直接 检 出 指定 章 的 分 支 ( chapter-9 )。 
记 住 ， 每 个 分 支 对 应 该 章 末 尾 的 代码 ( 例如 ，chapter-9 对 应 第 9 章 末 尾 的 代码 )。 训 者 可 以 在 和 定 
目录 下 执行 以 下 终端 命令 之 一 来 获取 当前 章 的 代码 。 
如 果 还 没有 代码 库 ， 请 输入 下 面 的 命令 来 获取 : 
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| git clone gitegithub， com:react-in-action/letters-social.git 
。 如 果 已 经 克隆 过 代码 仓库 


git checkout chapter- | 


如 果 你 是 从 其 他 章 来 到 这 里 的 要 确保 已 经 安装 了 所 有 正确 的 人 


npm install 


软件 开发 中 的 测 I 试 是 验证 假设 的 过 程 。 举 个 例子 , 假设 你 正在 构建 一个 让 用 户 书写 和 创建 情 
客 的 应 用 程序 ( 像 Medium 、Ghost 或 WordPress )。 用户 按 月 付费 获得 托管 和 工具 来 运行 他 们 目 
己 的 博客 。 当 创建 此 应 用 的 前 端 程序 时 ，( 在 其 他 一 些 事项 中 ) 有 几 个 必须 做 的 关键 事项 ， 包 括 
正确 显示 那些 帖子 并 允许 用 户 编辑 它们 。 

我 们 如 何 才 能 确定 应 用 程序 正在 做 它 需 要 做 的 事情 呢 ? 我 们 可 以 自己 试 试看 它 是 否 正常 工 
作 。 四 处 点 点 ,编辑 一 些 内 容 ， 并 用 能 想到 的 尽 可 能 多 的 方式 使 用 应 用 程序 。 这 个 手动 过 程 相当 
不 错 , 它 是 防止 bug 和 回归 的 第 一 道 防线 。 我 们 应 该 始终 注意 检查 自己 正在 做 的 工作 , 但 却 不 能 
快速 地 测试 这 些 东 西 ， 或 者 以 一 种 完全 一 致 的 方式 进行 快速 测试 。 

此 外 ， 随 着 应 用 程序 的 不 断 增长 ， 需 要 手动 测试 的 情境 和 功能 也 以 惊人 的 速度 增加 。 我 曾 见 
识 过 拥有 成 千 上 万 测试 用 例 的 应 用 程序 , 但 是 很 多 应 用 程序 的 测试 数量 却 很 容易 被 忽视 。 在 撰写 
本 书 时 ，React 库 本 号 就 有 4855 个 测试 用 例 。 想 要 测试 React 的 人 不 可 能 手工 验证 所 有 这 些 测试 
所 涉及 的 假设 。 

幸运 的 是 ， 我 们 可 以 使 用 软件 来 测试 软件 ， 而 不 是 手工 测试 所 有 东西 。 计 算 机 至 少 在 我 们 
表现 欠 佳 的 两 个 领域 出 类 拔 萃 : 速度 和 一 致 性 。 我 们 可 以 用 软件 测试 以 手工 方式 无 法 完成 测试 
网 a 大 群 人 以 各 种 可 能 的 方式 尝试 。 人 们 也 许 会 认为 ,，“ 我 们 的 项 目 很 小 而 且 相 
什么 差错 ”但 即使 编码 技术 再 历 害 , 也 无 法 避免 bug。 当 改变 一 些 东 西 时 (有 
时 息 斌 什 友 者 流下 开 应 用 程序 就 会 朋 演 并 以 无 法 预料 的 方式 运行 。 

但 无 须 对 不 可 避免 的 bug 感到 绝望 , 我 们 可 以 接受 它们 发 生 并 采取 措施 尽量 减少 其 影响 和 频 
率 。 这 正 是 测试 的 意义 所 在 。 你 也 许 对 什么 是 测试 有 一 些 大 概 的 了 解 ， 但 是 作为 开始 ,我 们 需要 
了 解 一 些 不 同类 型 的 测试 。 记 住 , 测试 的 世界 是 非常 庞大 的 , 所 以 我 不 可 能 在 这 里 介绍 所 有 内 容 。 
我 不 会 把 测试 作为 一 个 领域 进行 深入 介绍 ， 也 不 会 深入 讲解 一 些 类 型 的 测试 , 包括 集成 测试 、 回 
归 测 试 、 测 斌 目 动 化 等 。 但 在 本 章 结 束 时 ,你 应 该 对 这 些 知识 足够 熟悉 ,而 且 可 以 开始 用 几 种 不 
同 的 方式 测试 React 组 件 了 。 





9.1 测试 的 类 型 


束 像 我 说 过 的 , 测试 软件 是 使 用 软件 来 验证 假设 的 过 程 。 正 因为 是 使 用 软件 来 测试 软件 ， 所 
以 测试 最 终 将 使 用 与 构建 软件 时 相同 的 基本 类 型 ， 如 布尔 值 、 数 字 、 字 符 串 、 图 数 、 对 象 等 。 重 
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要 的 是 要 记 住 ， 这 里 没有 麻 法 一 一 只 是 更 多 的 代码 。 

测试 有 不 同类 型 , 我 们 将 使 用 其 中 一 些 类 型 来 测试 我 们 的 React 应 用 程序 。 它们 涵盖 了 应 用 程序 的 
不 同方 面 ， 当 一 起 使 用 并 且 比 例 适当 ， 它 们 会 极 大 地 提升 对 应 用 程序 的 信心 。 不 同类 型 的 测试 处 理应 
用 程序 的 不 同 部 分 和 范围 。 一 个 经 过 良好 测试 的 应 用 程序 不 但 会 测试 组 成 应 用 基础 部 分 的 独立 的 功能 
单元 ， 还 会 测试 这 些 功能 单元 的 集合 ， 以 及 在 最 高 层次 上 所 有 东西 结合 在 一 起 的 点 ( 如 用 户 界 面 ) 

下 面 是 一 些 测试 类 型 。 

图 单元 测试 一 一 聚焦 于 单个 功能 单元 。 例 如 ， 有 一 个 从 服务 器 端 获取 新 帖子 的 工具 方法 。 
单元 测试 将 只 关注 这 一 个 防 数 ， 而 不 关心 其 他 任何 事情 。 与 组 件 一 样 ， 这 些 测试 允许 重 
构 并 促进 了 模块 化 。 

图 服务 测试 一 一 聚焦 于 功能 集 。 "测试 谱系 ”这 一 部 分 可 能 包含 各 种 粒度 和 关注 点 。 关 键 的 
一 点 是 测试 的 东西 即 不 是 最 高 层次 的 功能 (参见 接 下 来 的 集成 测试 ) 也 不 是 最 低层 次 的 
功能 。 一 个 服务 测试 的 例子 可 能 是 一 个 使 用 了 几 个 功能 单元 的 工具 ,但 它 本 身 并 不 在 集 
成 测试 的 层次 上 。 

图 集成 测试 一 一 聚焦 于 更 高 层次 的 测试 : 程序 的 各 个 部 分 的 集成 。 它 们 测试 了 服务 和 
低层 功能 结合 在 一 起 的 方式 。 通 常 ， einerivteldosntrine poner 而 不 是 
Re 
序 的 交 

ea 我 们 很 快 就 会 讲 到 ， 但 我 们 需要 先 讨论 这 些 

测试 在 整个 测试 方法 中 是 如 何 协同 工作 的 。 如 果 之 前 做 过 测试 ， 你 可 能 听 说 过 测试 金字 塔 。 
如 图 9-1 所 示 ， 这 个 金字 塔 通常 指 的 是 应 该 编写 的 不 同类 型 测试 的 比例 。 本 章 将 只 为 组 件 编 
写 单 元 测试 。 


DL) 











测试 金字 塔 








| 
集成 测试 - 










- 功能 集 
- 比 单元 测试 更 脆 弱 一 些 
- 编写 成 本 低 

- 运行 时 间 较 短 


服务 测试 










- 单个 功能 单元 - 促进 模块 化 
- 数量 多 - 编写 成 本 低 
“基础 ” - 运行 时 间 短 


单元 测试 


图 9-1 测试 金字 塔 是 一 种 指导 开发 者 在 测试 应 用 程序 时 编写 多 少 和 哪 种 类 型 测试 的 方法 。 需 要 注意 的 是 ， 
某 些 类 型 的 测试 需要 花费 更 长 时 间 ， 因 此 在 时 间 方 面 更 “昂贵 ”( 财务 成 本 亦 然 ) 
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为 什么 测试 


测试 在 有 些 软 件 开发 范式 中 是 整个 开发 过 程 的 “一 等 公民 ”。 这 意味 看 测试 非常 重要 ， 在 开 
发 过 程 的 开始 和 整个 过 程 中 都 要 考虑 ， 并且 通常 在 决定 某 事 是 否 完 成 时 发 挥 作用 。 的 确 ， 公认 测 
试 对 于 软件 开发 是 件 好 事 , 但 在 某 些 范例 中 测试 扮演 了 核心 角色 。 例如 ， 可 能 昕 说 过 测试 驱动 开 
发 ( Test-Driven Development，TDD )。 顾 名 思 义 ， 当 实践 TDD 时 ,编写 软件 的 过 程 就 是 由 测试 
驱动 的 。 应 用 时 ， 开 发 人 员 通 常会 编写 一 个 失败 的 测试 (一 个 断言 尚未 满足 的 测试 )， 只 编写 足 
够 的 代码 通过 测试 ， 重 构 任 何 重 复 的 代码 ， 然 后 继续 下 一 个 特性 ， 如 此 反复 。 

尽管 不 必 成 为 TDD 的 严格 实践 者 也 能 编写 优秀 的 软件 ， 但 在 继续 之 前 考虑 一 下 其 市 来 的 一 
些 好 处 。 如 果 已 经 明日 测试 的 好 处 ， 请 随意 继续 下 一 下， 我 们 将 在 那里 开始 React 的 测试 。 但 我 
想 问 一 个 重要 问题 : 我 们 为 什么 要 测试 ? 

首先 ,也 是 最 重要 的 ,我 们 想 要 编写 可 工作 的 软件 。 现 代 软 件 有 如 此 多 相互 关联 的 部 分 以 至 
于 假定 软件 栈 的 每 个 部 分 都 将 始终 可 靠 地 工作 是 非常 思春 的 。 东 西 总 会 坏 掉 , 所 以 与 假设 事情 会 
始终 正常 发 展 相 比 , 假设 事情 会 失败 更 为 合适 。 我 们 可 以 尽 我 们 所 能 通过 测试 自己 的 假设 来 减少 
软件 可 能 于 省 的 方式 。 测 试 迫使 开发 人 员 去 审视 (或 重新 审视 ) 对 软件 的 假设 。 开 发 人 员 可 以 详 
细 检 查 软 件 能 够 处 理 的 不 同情 况 并 确保 它 能 恰当 地 处 理 所 有 情况 。 

其 次 , 测试 软件 的 过 程 有 利于 编写 出 更 好 的 代码 。 经 历 编写 测试 的 过 程 可 以 促进 开发 人 员 仔 
细 思 考 代码 的 作用 ， 尤 其 是 先 写 测 试 的 情况 下 ( 如 TDD 那样 )。 开 发 者 也 可 以 在 事后 编写 测试 ， 
虽然 这 样 不 太 可 取 , 但 这 也 比 完全 不 进行 测试 要 好 。 经 历 测 试 的 过 程 将 帮助 开发 者 更 好 地 理解 自 
己 编写 的 代码 并 验证 自己 和 他 人 对 程序 如 何 运 行 所 做 的 假设 。 

再 次 , 将 测试 集成 到 软件 开发 流程 中 意味 着 可 以 更 频繁 地 发 布 代码 。 你 可 能 之 前 听 过 技术 行 
业 中 的 人 提 到 “频繁 交付 ”。 这 通常 意味 着 以 增 量 和 频繁 的 方式 发 布 软件 。 软 件 公 司 在 过 去 倾 回 
于 在 一 个 非常 大 的 流程 之 后 才 发 布 软件 ， 一 年 只 发 布 几 次 (或 者 至 少 不 那么 频繁 )。 

今天 人 们 的 想法 已 经 发 生 了 改变 , 人 们 已 经 意识 到 增 量 迭代 通常 会 给 软件 市 来 更 好 的 结果 : 可 
以 更 快 从 用 户 和 其 他 人 那里 获得 有 关 软 件 的 反馈 ,更 容易 进行 实验 , 等 等 。 对 经 过 良好 测试 的 应 用 
的 信心 是 这 个 过 程 的 关键 部 分 。 通 过 使 用 Circle CI、Travis CI 或 其 他 类 似 的 持续 集成 ( Continuous 
Deployment，CI ) 或 持续 部 署 工 具 可 以 让 测试 成 为 软件 部 署 过 程 的 一 部 分 。 其 想法 是 : 如 果 测 试 通 
过 ， 软 件 就 会 被 部 署 。 这 些 工 具 通 向 在 一 个 原始 的 环境 中 运行 测试 ， 如果 测 试 通过 , 则 将 代码 发 送 
到 可 以 运行 应 用 程序 的 任何 系统 。 图 9-2 展示 了 Letters Social 应 用 程序 用 来 测试 和 部 署 的 过 程 。 

最 后 ,测试 还 可 以 帮助 开发 者 回头 重 构 代码 或 移动 代码 。 比 方 说 ,需求 发 生 了 变化 ,开发 人 
员 需 要 移动 一 些 组 件 。 如 果 组 件 保持 模块 化 并 且 拥 有 良好 的 测试 ， 移动 它们 就 很 容易 。 当 然 ， 没 
有 经 过 测试 的 代码 也 可 以 移动 , 但 与 代码 经 过 测试 时 的 感觉 相 比 , 开发 人 员 不 太 明 确 它 是 否 破 坏 
了 系统 的 其 他 部 分 。 

关于 软件 测试 的 好 处 和 理论 还 有 很 多 要 说 的 ， 但 这 超出 了 本 书 的 范围 。 如 果 想 要 了 解 更 多 ， 
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建议 看 看 Roy Osherove 的 The A4rt of Unit Testing (第 2 版) 和 由 Nat Pryce 与 Steve Freeman 共同 
编写 的 Growing Object-Oriented Software, Guided by Tests。 








局 加 


代码 已 经 被 存储 了 。 在 测试 环境 中 运行 代码 。 加 载 并 运行 应 用 
通过 git push 获 取代 码 。 每 次 提交 运行 所 有 测试 。 程序 代码 。 
让 感 兴趣 的 服务 知道 。 如 果 测 试 通过 ， 部 署 到 Heroku。 


如 果 测 试 失败 ， 让 我 知道 并 且 不 部 署 。 


9-2 ”Letters Social 部 署 流 水 线 。 当 我 ( 或 者 其 他 对 这 个 仓库 有 贡献 的 人 ) 推送 了 代码 ，CI 构建 
过 程 就 会 被 触发 。CI 提供 者 ( 本 例 中 使 用 Circle ) 使 用 了 Docker 容器 来 快速 可 靠 地 运行 测试 。 


如 果 测 试 通过 ， 代 码 将 会 被 部 署 到 用 来 运行 代码 的 任何 服务 上 。 我 们 的 例子 用 的 是 Now 


9.2 用 jest、Enzyme 和 React-test-render 测试 React 组 件 


尽管 人 们 开发 了 专门 的 工具 来 辅助 测试 , 但 测试 软件 也 只 是 软件 , 它 也 是 由 与 普通 程序 相同 
的 基本 类 型 和 基础 元 素 组 成 的 。 虽然 我 们 可 以 尝试 创建 必要 的 工具 来 运行 所 有 测试 , 但 开源 社区 
已 经 为 一 大 堆 强 力 工具 做 了 大 量 的 工作 ， 因 此 我 们 会 使 用 这 些 工 具 。 

我 们 需要 一 些 类 型 的 库 来 测试 自己 的 React 应 用 程序 。 


测试 运行 器 一 一 开发 者 运行 测试 所 需要 的 东西 。 虽然 大 部 分 测试 可 以 作为 常规 JavaScript 
文件 执行 ， 但 开发 人 员 也 想 利 用 测试 运行 器 的 一 些 附加 特性 ， 例 如 ， 一 次 运行 多 个 测试 
以 及 用 更 深 腕 的 方式 报告 错误 或 成 功 信 息 。 对 于 本 书 ， 我 们 会 将 Jest 用 于 测试 的 大 多 数 
方面 ( Jest 是 由 Facebook 工程 师 开 发 的 测试 库 ), 我 们 也 可 以 考虑 一 些 内 置 功能 较 少 的 流 
行 蔡 代 方案 ， 包 括 Mocha 和 Jasmine。Jest 通常 用 于 测试 React 应 用 程序 ， 但 也 为 其 他 框 
架 创 建 了 适 配 郝 。 示 例 源 代码 包含 一 个 调用 React 适 配 胡 的 设置 文件 ( test/setup.js )。 
测试 替身 一 一 在 编写 测试 时 ， 开 发 人 员 和 希望 尽 可 能 避免 将 测试 与 其 他 基础 设施 的 脆弱 部 
分 或 不 可 预测 部 分 绑 在 一 起 ; 开发 人 员 依赖 的 其 他 工具 应 该 被 mock 一 一 使 用 一 个 行为 可 
以 预期 的 “ 伪 ” 力 数 来 蔡 代 。 这 种 方式 的 测试 可 以 促进 对 被 测 代 码 和 模块 化 的 关注 ， 因 
为 测试 不 会 依赖 给 定时 间 的 确切 代码 结构 。 我 们 会 使 用 Jest 进行 mock 和 测试 蔡 身 ， 但 
其 他 库 也 可 以 做 这 些 ， 如 Sinon。 

断言 库 一 一 开发 者 可 以 使 用 JavaScript 对 代码 进行 断言 (例如 ,是否 等 于 到 ), 但 我 们 
仍然 需要 考虑 大 量 的 边界 情况 。 开 发 者 们 创建 了 很 多 解决 方案 以 使 编写 有 关 代 码 的 断言 
更 为 容易 。Jest 自 带 内 建 的 断言 方法 ， 所 以 我 们 会 依赖 这 些 方法 。 

环境 助手 一 一 对 于 需要 在 浏览 硕 环 境 中 运行 的 代码 ， 在 其 上 运行 测试 对 开发 者 的 要 求 略 
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有 不 同 。 浏 览 紫 环境 是 独特 的 ， 包含 了 诸如 DOM、 用 户 事件 ， 以 及 Web 应 用 程序 的 其 他 
常规 部 分 。 这些 测试 工具 有 助 于 确保 我 们 能 够 成 功 模拟 浏览 右 环 境 。 开发 者 将 使 用 Enzyme 
和 Reacttest render 来 帮助 测试 React 组 件 。Enzyme 可 使 测试 React 组 件 更 容易 。 它 提供 了 
一 个 健壮 的 API， 人 允许 开发 者 查询 不 同类 型 的 组 件 和 HTML 元 素 、 读 写 组 件 属性 、 检 查 和 
设置 组 件 状态 等 。React test render 做 的 事情 类 似 ， 它 还 可 以 生成 组 件 快照 。 我 们 并 不 会 深 
入 Enzyme 或 React test render API 的 方方面面 ， 你 可 以 在 网 上 浏览 更 多 信息 。 

国 框架 特定 的 库 一 一 有 一 些 专 门 为 React (或 者 其 他 框架 ) 开发 的 库 , 用 以 辅助 库 或 框架 的 
测试 并 处 理 框架 需要 的 任何 设置 , 它们 使 得 编写 特定 框架 的 测试 变 得 更 容易 。React 中 几 
乎 所 有 东西 都 只 是 “JavaScript"， 所 以 在 这 些 工具 中 也 看 不 到 什么 “魔法 ”。 

国 被 盖 率 工 具 一 一 由 于 代码 的 确定 性 ， 人 们 找到 了 方法 确定 测试 “ 窗 盖 ”了 哪些 代码 。 这 
非常 棒 ， 因 为 我 们 能 够 得 到 一 个 用 来 指导 确定 代码 测试 好 坏 的 指标 。 它 不 能 替代 逻辑 和 
基本 分 析 ( 100% 的 代码 覆盖 率 也 不 意味 着 没有 bug )， 但 是 它 可 以 指导 我 们 如 何 测 试 代 码 。 
我 们 将 使 用 Jest 的 内 置 覆盖 率 工 具 ， 它 使 用 了 名 为 Istanbul 的 流行 工具 。 

接 下 来 ,我 们 将 开始 安 疤 用 于 测试 的 工具 。 如 果 从 GitHub 克隆 了 本 书 的 仓库 ， 这 些 工 具 应 

该 已 经 被 安 站 好 了 了。 在 切换 章 时 知 要 青 次 运行 npm install， 以 确保 已 经 拥有 该 章 所 需要 的 全 
部 库 。 
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安装 好 需要 的 工具 后 ,就 可 以 开始 编写 一 些 测试 了 。 本 节 中 ， 我 们 将 设置 运行 测试 的 命令 
并 开始 测试 一 些 基 本 的 React 组 件 。 我 们 会 对 组 件 设 置 断言 并 了 解 对 组 件 泻 染 的 输出 进行 测试 
的 方法 。 

但 在 开始 之 前 , 我 应 该 说 明 一 些 关于 Jest 的 事情 以 及 测试 代码 在 哪儿 运行 。 依据 所 编写 的 测 
试 的 类 型 ， 能 够 配置 Jest 在 不 同 的 环境 中 和 运行。 如果 正在 为 运行 于 浏览 需 的 React 应 用 程序 编写 
测试 ， 我 们 要 告诉 Jest， 以 便 它 能 够 提供 正确 模拟 真实 浏览 器 所 需要 的 虚拟 浏览 器 环境 。Jest 使 
用 另 一 个 库 jsdom 来 实现 这 一 点 。 如 果 为 Node.js 应 用 程序 编写 测试 ， 就 无 须 jsdom 环境 的 额 
外 内 存 和 负担 一 一 仅 需 测试 服务 器 端 代 码 。Jest 默认 配置 成 运行 面向 浏览 器 的 测试 ， 所 以 不 需要 
覆盖 任何 东西 。 










练习 9-1 回顾 测 A 
te ， 党 试 将 类 型 与 测试 类 型 的 描述 进行 匹配 。 
J Se oti i i er 


i | Ce | 
一 一 复杂 且 通 兴 脆 双 的 测试， 需要 花费 很 长 时 间 来 编 宇和 运行 它们 从 吉 训 次 测试 不 同系 统 协 上 
工作 的 方式 。 这 些 类 型 的 测试 通常 比 其 他 类 型 的 要 少 。 
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“一 一 不 太 复杂 的 测试 ， 测 试 特定 系统 工作 的 方式 ， 不 与 其 他 系统 交互 。 
一 -底层 的 、 目 的 明确 的 测试 ， 专 注 于 测试 小 块 功能 。 这 些 测试 应 ; 






9.3.1 开始 使 用 Jest \ 


如 前 所 述 ， 我 们 将 使 用 Jest 来 运行 测试 。 可 以 通过 命令 行 来 运行 Jest， 它 会 执行 测试 ， 因 此 
我 们 会 回 package.json 文件 添加 一 个 脚本 命令 以 便 可 以 运行 这 个 命令 。 代 码 清单 9-1 展示 了 如 何 
回 package.json 添加 自 定义 脚本 。 如 果 从 GitHub 克隆 了 这 个 仓库 ， 那 么 这 个 脚本 命令 应 该 已 经 
可 以 使 用 了 。 


代码 清单 9-1 设置 自 定义 npm 脚本 ( package.json ) 





ng 

“Serintess 4 

人 

"test "Jeést --coverage", 运行 测试 ， 并 输出 

"test:w": "jest -watch --coverage", 测试 覆盖 率 
TISE ss 4 

"testEnvironment": "jsdom", 


在 监视 模式 中 运行 测试 
"setupFiles": 


("raf/polyfill",'", /test/setup;, js") 
全 于 本 配置 Jest; 示例 代码 中 包含 
reDoSsitory™s 


.由 Ey AN Ts 
"type": ee 于 些 测 试 辅助 和 桩 代码 
“url": "git+ssh://git@github.,com/react-in=action/letters-social .git 
}, 
"author": "Mark Thomas. <hello@ifelse,1i6>3", 
i 


目前 有 了 运行 测试 的 命令 (npm test )， 此 时 运行 应 该 不 会 获取 到 任何 有 帮助 的 信息 ， 因 
为 还 没有 任何 可 以 运行 的 测试 ( Jest 应 该 会 在 终端 给 出 相应 的 警告 )。 也 可 以 通过 npm run test:w 
在 监视 模式 中 运行 Jest。 这 样 就 不 用 每 次 都 手动 运行 测试 了 。Jest 沉浸 式 的 监视 模式 特别 有 用 ， 
它 会 做 一 些 工作 来 只 运行 那些 与 发 生 更 改 的 文件 相关 的 测试 。 如 果 有 一 个 大 型 测试 集 并 且 不 想 每 
次 者 运行 每 一 个 测试 , 这 样 做 就 很 有 帮助 。 还 可 以 通过 提供 正则 表达 式 或 者 文本 字符 串 搜 索 来 运 
oie 
工具 很 重要 


在 评估 库 时 ， 济 试 库 其 至 下 个 测试 有 时 最 后 才 会 被 考虑 。 至 少 从 从 两 个 原因 看 来 这 很 模 料 。 首 先 ,不 
可 用 的 测试 库 会 geist Lbs Ed one 
更 难 维护 、 更 不 稳定 、 更 难于 处 理 。 \ 

罚 沪 个 缺点 是 ， 如 果 开 发 者 或 团队 花费 大 量 时 间 编写 测试， 测试 工具 会 对 时 间 产 生 巨大 的 影响 ， 这 
可 能 很 快 就 会 转化 为 企业 的 损失 ， 因 为 工程 师 将 花费 更 长 的 时 间 完 成 他 们 需要 做 的 工作 。 我 目睹 了 这 两 
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种 结果 。 如 果 测 试 从 一 开始 就 不 被 认为 是 最 重要 的 事情 ， 那 么 随 着 时 间 的 推移 ， 它 会 变 得 越 来 越 困难 ， 
最 后 就 被 当 作 “总 有 一 天 ” 要 下 的 那 各 于 情 。 结果 可 能 导 到 更 玲 对 代码 引出 有 信息 因为 有 关 功 能 的 候 
设 不 再 被 测试 支撑 。 : : 

测试 工具 值得 被 重视 的 另 一 个 原因 是 ， 如 果 要 测试 代码 ， 部 么 需要 牵扯 大 量 的 时 间 投入 这 时 如 时 
有 不 可 靠 的 测试 或 者 需要 花费 很 长 时 间 运 行 的 测试 设置 ， 那 么 最 终 可 能 损失 数 以 天 计 的 大 量 时 间 。 这 个 
问题 没有 有 效 的 方式 ， 但 长 远 来 看 ， 将 测试 工具 和 设置 作为 头等 问题 来 对 待 通常 会 有 莫大 帮助 。 





9.3.2 ”测试 无 状态 函数 组 件 


是 时 候 开 始 编写 一 些 测试 了 。 首 先 , 我 们 将 关注 一 个 相对 简单 的 测试 组 件 示 例 。 我 们 将 测试 
Content 组 件 。 它 只 是 在 其 内 部 泻 染 了 一 个 带 有 内 容 的 段落 ， 其 他 什么 都 没 做 。 代 码 清 单 9-2 展 
示 了 这 个 组 件 的 结构 。 


代码 清单 9-2 ”Content 组 件 ( src/components/post/Content.test.js ) 





import React, { PropTypes } from ‘react'; 组 件 接收 props 对 象 并 使 用 post 的 
,| J 
const Content = (props) => { | content 属性 来 泻 染 段落 元 素 
const { post } = props; 将 .gontent 类 样 
return ( 3 
| pA ENS 
<p className="content"> 式 赋值 给 段落 
{Post .content } EE 
本 段落 元 素 的 内 容 是 来 自 post 
和 对 象 的 content 属性 
?3 
Content .propTypes = 1 
post: PropTypes.object, 导出 组 件 这 很 重要 ,因为 
}; | a g 
export default Content; 需要 在 测试 中 寻 和 组件 


在 开始 编写 测试 之 前 ， 首 先 要 做 的 事情 之 一 是 考虑 要 验证 哪些 假设 。 也 就 是 说 ,一旦 所 
有 测试 通过 ， 它 们 应 该 向 使 用 者 确认 某 些 事情 并 作为 一 种 保证 。 实 际 上 ， 我 对 测试 最 喜欢 的 
事情 之 一 就 是 ， 当 修改 了 特定 功能 或 系统 的 一 部 分 时 ， 我 依赖 它们 的 失败 。 它 们 支持 我 的 假 
设 ， 即 我 所 做 的 更 改 代表 了 对 应 用 程序 或 系统 的 更 改 。 这 让 我 在 编写 代码 时 感觉 更 舒服 ， 
方面 因为 我 事先 就 有 事情 应 该 如 何 工 作 的 记录 ， 男 一 方面 因为 我 可 以 全 面 了 解 更 改 如 何 影响 
应 用 程序 。 

让 我 们 来 看 看 这 个 组 件 ， 考 虑 如 何 测试 它 。 关 于 这 个 组 件 ， 有 一 些 想 要 验证 的 假设 。 其 一 ， 
它 需 要 呈现 一 些 作 为 属性 传人 的 内 容 ,， 还 需要 给 段落 元 素 赋 值 类 名 ; 其 二 , 组 件 需要 关注 的 就 没 
什么 了 。 这 些 东 西 足以 使 你 开始 编写 测试 。 

你 可 能 注意 到 ,“React 正确 运行 ”并 非 这 里 要 测试 的 内 容 之 一 。 我 们 还 排除 了 诸如 “ 画 
数 可 以 被 执行 ”“JSX 转译 器 能 运行 ”之 类 的 东西 ,以 及 其 他 一 些 关 于 我 们 正在 使 用 的 技术 的 
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基本 假设 。 这 些 东 西 确实 重要 到 需要 测试 ， 但 我 们 编写 的 测试 永远 无 法 充分 或 准确 地 验证 这 
些 假设 。 这 些 项 目 要 负责 编写 自己 的 测试 并 确保 自己 能 正常 工作 。 这 就 强调 了 选择 可 徘 、 经 
过 良好 测试 并 保持 更 新 的 软件 的 重要 性 。 如 果 你 严重 怀疑 React 的 可 靠 性 ， 你 的 怀疑 可 能 是 
没有 根据 的 。 
纵然 不 完美 ,React 仍然 在 一 些 全 球 最 受 欢 迎 的 Web 应 用 程序 上 得 到 了 应 用 , 包括 Facebook 
和 Netflix 网 站 。 虽 然 确实 有 bug， 但 在 我 们 这 种 简单 直接 的 情形 中 不 太 可 能 遇 到 它们 。 
你 知道 一 些 想 要 验证 的 组 件 的 事情 , 但 如 果 从 头 开始 并 且 先 编写 测试 的 话 , 也 可 以 用 为 一 种 方 
式 。 你 可 能 想 :“ 我 们 需要 一 个 显示 内 容 的 组 件 ， 它 具有 特定 类 型 并 且 具 有 特定 的 CSS 类 名 一 一 如 
此 CSS 才能 起 作用 。” 之 后 就 可 能 编写 验证 这 些 条 件 的 测试 。 肌 React 的 缘故 ， 你 会 先 
写 代码 再 写 测 试 , 但 我 们 可 以 看 到 从 测试 开始 是 如 何 让 事情 变 得 容易 的 : 一 开始 就 必须 仔细 考虑 并 
ae 
让 我 们 来 看 看 如 何 测试 这 个 组 件 。 要 做 到 这 一 点 ， 需 要 编写 一 个 测试 套件 一 一 它 是 一 组 测试 。 
单个 测试 通过 断言 (关于 代码 的 声明 ， 可 以 返回 真 或 假 ) 来 验证 假设 。 例如 ， 组 件 的 一 个 测试 会 
断言 设置 了 正确 的 类 样式 名 。 如 果 任 何 断 言 失败 , 那么 这 个 测试 就 会 失败 。 这 就 是 得 知 应 用 中 有 
些 东西 发 生 了 不 经 意 的 改变 或 者 不 再 工作 的 方法 。 代 码 清单 9-3 展示 了 如 何 建立 测试 骨架 。 


代码 清单 9-3 ”Content 组 件 的 测试 骨架 ( src/components/post/Content.test.js ) 





导 人 React 
导 人 相关 的 
辅助 方法 


import React from Teact ; 
import { shallow } from " enzyme ' ; 
import renderer from 'react-test-renderer'; 





import { Content } from "'. /Content"; 


| 导入 被 测 组 件 


describel('<Content/> (YY => 1 
test'('should render correctly', 
Jest 使 用 诸如 describe 
jy) 一 个 实际 测试 一 一 it we 这 料 jasmine 风格 的 方 


} ) ; 也 是 由 jest 全 局 提供 的 法 来 组 织 测 试 





注意 ， 这 个 组 件 的 测试 文件 以 .test.js 结尾 。 这 是 一 个 惯例 ， 如 果 愿 意 可 以 选择 遵循 。Jest 默 
认 情 况 下 会 查找 以 .spec.js 或 者 .testjs 结尾 的 文件 并 运行 这 些 测 试 。 如 果 选 择 遵 循 不 同 的 惯例 , 碘 
需要 将 它们 添加 到 命令 行 调用 中 (如 jest --watch ./my.cool.test.file.js) 来 显 却 
地 告诉 Jest 要 运行 哪些 文件 。 本 书 所 有 测试 都 将 遵循 test,js 惯例 。 

还 要 注意 测试 文件 的 放置 位 置 。 有 些 人 选择 把 所 有 测试 都 放 在 一 个 叫 作 test 的 “镜像 ”目录 
中 , 该 目录 通常 位 于 项 目的 根 目录 下 。 对 于 每 一 个 要 测试 的 文件 ,都 会 在 测试 目录 中 创建 一 个 对 
应 的 文件 。 这 是 一 种 很 好 的 文件 组 织 方 式 , 也 可 以 将 测试 文件 放置 在 它们 的 源 文件 旁边 。 我 们 将 
几 这 种 方 外 ， 但 无 论 哪 种 方法 都 可 以 。 

你 也 许 已 经 注意 到 ， 到 目前 为 止 describe 函数 并 没有 什么 特别 之 处 ， 它 们 主要 是 用 于 组 
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织 并 确保 将 测试 分 割 为 适当 的 块 来 测试 代码 的 不 同 部 分 。 对 这 样 的 小 文件 来 说 , 似乎 并 没有 多 大 
必要 这 么 做 ,但 是 我 曾经 处 理 过 2000 一 3000 行 (甚至 更 多 ) 的 测试 文件 ， 依 经 验 而 言 : 可 读 性 
LO TR 


Mr oe : . 

> 你 是 否 读 过 没有 与 被 测 代码 得 到 同等 对 待 的 测试 代码 ”这 种 事 我 已 经 碰 到 过 不 止 _ 次 了 。 阅 读 不 简 
洁 的 测试 代码 会 让 人 感到 困惑 甚至 肖 才 。 测 试 只 是 更 多 的 代码 而 已 ， 所 以 它们 也 需要 简 ; 洁 可 读 ， 对 吧 ? 
我 在 本 章 已 经 提 到 过 测试 有 时 候 被 认为 次 于 应 用 程序 代码 的 编号。 测试 代码 被 视 为 不 得 不 二 的 任务 ， 其 
至 是 开发 者 与 应 用 程序 代码 之 间 的 障碍 ， 因 此 就 会 降低 标准 。 很 容易 陷入 这 种 趋势 ， 然 而 实际 上 写 得 关 
的 测试 与 写 得 差 的 应 用 程序 代码 一 样 精 粒 。 测 斌 应 该 作为 另 一 种 形式 的 代码 文档 开发 人 员 仍然 需要 阅 
读 它 。 记 住 ， 测试 代码 应 该 保持 简洁 。 


Jest 将 查找 要 测试 的 文件 ， 然后 执行 这 些 不 同 的 deseribe 和 it 函数 调用 提供 给 它们 的 





回调 函数 。 但 需要 在 回调 孔 数 中 放 什 么 呢 ?” 需 要 设立 断言 。 要 做 到 这 一 点 , 需要 一 些 可 以 断言 的 
东西 ,这 就 是 Enzyme 的 用 武之 地 , 它 允 许 创建 可 测 可 以 对 其 进行 检视 三 





我 们 会 使 用 Enzyme 的 浅 泻 染 ， 它 将 创建 组 件 的 轻 量 级 版 本 ， 其 不 会 执行 完全 的 挂 载 或 向 DOM 
中 进行 插入 。 我 们 还 需要 提供 一 些 mock ( 假 的 ) 数据 供 组 件 使 用 。 代 码 清单 9-4 展示 了 如 何 将 
组 件 的 测试 版 本 添加 到 测试 套件 中 。 开 始 编写 测试 之 前 ， 请 确保 在 终端 运行 npm run test:w 
命令 来 启动 测试 运行 器 。 


代码 清单 9-4” 浅 泻 染 ( src/components/post/Content.test.js ) 





import React from 'react'; 
import { shallow } from ‘enzyme'; 
import renderer from 'react-test-renderer'; 


import ( Content 3} from '. /Content'; 


describe('<Content/>', () => { 
describe('render methods', () => 1{ 
it('should render correctly', () => { 
const mockPost = 1 
content: 'I am learning to test React components ' ， 创建 组 件 可 以 使 用 
ls 的 虚 post 对 象 
const wrapper = shallow(<Content post={mockPost} />); 
1 
})}3 
}); 执行 组 件 的 浅 演 染 并 保存 返 


回 的 包装 带 留 和 之 后 使 用 


现在 建立 了 一 个 可 以 对 其 进行 断言 的 测试 组 件 。 进 行 断言 将 使 用 Jest 内 置 的 expect () 孜 
数 。 如 果 使 用 的 是 其 他 断言 库 ， 可 能 会 用 到 其 他 东西 。 记 得 之 前 提 到 过 ,这 些 断 言 库 是 为 了 让 断 
言 更 简单 。 例 如 ,检查 一 个 对 象 是 否 深层 相等 ( 意味 着 每 一 个 属性 都 相等 ) 可 能 是 一 项 复杂 的 任 
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务 。 在 编写 测试 时 , 我 们 不 应 该 只 是 为 了 编写 测试 而 关注 于 实现 大 量 新 功能 ， 而 应 该 关注 于 被 测 
代码 。 上 断言 辅助 和 其 他 开源 库 让 这 点 变 得 更 容易 。 

为 了 测试 手头 的 组 件 ， 需 要 做 一 些 我 们 之 前 思考 过 的 断言 : 类 样式 名 称 、 内 部 内 容 和 元 素 类 
型 。 我 们 还 将 使 用 React Test Renderer 来 创建 一 个 快照 测试 。 快 照 测 试 是 Jest 的 一 个 功能 ， 它 让 
使 用 者 用 一 种 独特 的 方式 来 测试 组 件 的 泻 染 输出 。 快照 测试 与 可 视 化 回归 测试 密切 相关 , 可 视 化 
回归 测试 是 一 个 可 以 用 来 比较 应 用 程序 可 视 化 输出 并 检查 差异 的 过 程 。 

如 果 发 现 图 像 有 差异 ， 就 知道 测试 失败 并 需要 调整 ， 或 者 至 少 需 要 更 新 输出 快照 。Jest 没有 
使 用 图 片 ， 它 创建 了 测试 的 JSON 输出 并 将 其 存储 在 特定 的 目录 中 。 应 该 将 这 些 与 其 他 代码 一 起 
添加 到 版 本 控制 中 。 代 码 清单 9-5 展示 了 如 何 使 用 Jest、Enzyme 和 React Test Renderer 来 编写 这 
些 汤 言 。 





-代码 清单 9-5 ”编写 断言 ( src/components/post/Content.test.js ) 


import React from ‘react'; 





import { shallow } from 'enzyme'; 村 人 enZyIme 和 
import renderer from ‘react-test-renderer'; react-test-renderer. 导入 要 测试 
: | ”人 
import Content from ../../../Ssrc/comonents/post/Content"; 
describe (<Content/>", {) => 1 使 用 Jasmine 风格 的 describe 困 数 来 
test('should render correctly', () => { 将 测试 组 织 在 一 起 
const mockPost = { 
创建 content: 'I am learning to test React components' 
post 的 }; 使 用 Enzyme 的 
mock const wrapper = shallow (<Content post={mockPost} />); 浅 演 染 方法 来 演 
expect (wrapper.find('p') .length) .toBe (1) ; 染 组 件 
expect (wrapper.find('p.content') .length) .toBe(1); 
expect (wrapper.find(".content') .七 eXt () ) .七 Be (mockPost .Conten 七 ) ; 
expect (wrapper.find('p') .text() ) .toBe (meckPost .content) ; 
i 
test('snapshot"', () => { 
Const mockPost = { 
content: 'I am learning to test React components' 
用 
const component = renderer.create(<Content post={mockPost} />); 
const tree = Component ,toyJSON ( ) ; 
expect (tree) .toMatchSsnapshot () ; 
2 使 用 Jest 和 react-test- 


二 we 
renderer 创建 快照 测试 


如 果 测 试 运行 器 正在 运行 ， 应 该 会 看 到 来 自 Jest 的 结果 输出 。 自 测试 运行 磊 出 现 以 来 ，Jest 
命令 行 工具 有 了 极 大 的 改进 ， 应 该 能 够 在 终端 里 看 到 有 关 测 试 的 重要 信息 。 
9.3.3 不 使 用 Enzyme 测试 CreatePost 组 件 


现在 第 一 个 测试 已 经 开始 工作 ， 可 以 继续 测试 更 复杂 的 组 件 。 大 多 数 情 况 下 ,测试 React 组 


184 第 9 章 ”测试 React 组 件 


件 应 该 简单 明了 。 如 果 发 现 正在 创建 一 个 包含 了 大 量 功 能 的 组 件 以 及 之 后 与 之 相关 的 大 量 测试 ， 
也 许 要 考虑 将 其 分 解 为 几 个 组 件 ( 尽管 并 非 总 能 如 此 )。 

接 下 来 要 测试 的 CreatePost 组 件 比 Content 组 件 拥有 更 多 功能 ， 测 试 需 要 人 处理 这 些 增加 的 功 
能 。 代 码 清单 9-6 展示 了 CreatePost 组 件 ， 以 便 在 为 其 编写 测试 之 前 能 够 回顾 一 下 。Home 组 件 
使 用 CreatePost 组 件 来 触发 新 帖子 的 提交 , 它 会 泻 染 出 一 个 随 用 户 输入 进行 更 新 的 文本 域 以 及 一 
个 当 用 点 击 时 提交 表单 数据 的 按钮 。 当 用 户 单 击 时 , 它 将 调用 由 父 组 件 传 入 的 回调 函数 。 我 们 可 
以 测试 所 有 这 些 假设 并 确保 组 件 按 预 期 工作 。 





代码 清单 9-6 CreatePost 组 件 ( src/components/post/Create.js ) 





import PropTypes from ‘prop-types'; 
import React from 'react'; 
imBort Filter from Bad=words".; 
import classnames from 'classnames'，; 
import DisplayMap from '../map/DisplayMap'; 
import LocationTypeAhead from '../map/LocationTypeAhead',，; 
class CreatePost extends React.Component { 
static propTypes = { 
onSubmit: PropTypes.func.isRequired 
}; 
eonstructor (Bxeops) 1 
super (props); 
this.initialState = { 
EGONtents: 
valid: false, 
showLocationpPpicker: false， 
LoSatli ris 
lat S41935641. 
Lao —118. T42811S: 
name: null 
} ， 
locationSelected: false 
站 
thLSs。state = this.initialSstate; 
this. filter = new Filter (); 
this.handlePostChange = this.handlePostChange.bind(this); 
this.handleRemoveLocation = this.handleRemoveLocation.bindl(this); 
this.handlesubmit = this.handleSsubnit.bind(this); 
this.handleToggleLocation = this.handleToggleLocation.bind(this),; 


this.onLocationSelect = this.onLocationSelect.bindl(this),; 
this.onLocationUpdate = this.onLocationUpadate .bina(this) ， 
this.renderLocationControls = this.rernaerLocationCcControlLls.bina(this) ， 
} 
handlePostChange (event) { 人 
const content = this.filter.clean (event.target .Value) ， 
this.setState(() => { 
return { 
Content. 


valid: content.length <= 300 
}; 


9.3 ”编写 第 一 个 测试 185 


} 
} 
handleRemoveLocation() { 
this.setState(() => ({ 
locationSelected: false, 
Location: this. inlitialstate Location 
Ey . 
} 
handleSubmit (event) { 
event .preventDefault (); 
i (lthis State.valsgd)y 二 
return; 
} 
const newPost = 1 
content: this.state.content 
区 
if (this.state.locationSelected) |{ 
newPost.location = this.state.location; 
} 
this.props.onSubmit (newPost); 
this.setState(() => (I{ 
COmMEents 
valids: false., 
ShowLocationPicker: false, 
location: thies..deftaultLoeatLion, 
locationSelected: false 
站 人 这 
} 
onLocationUpdate(location) { 
this.setState(() => ({ location }));，; 
} 
onLocationSelect (location) 
this.. setSstate(() => 《1 
G6e@ation, 
showLocationPicker: false, 
locationSelected: true 
这 
} 
handleToggleLocation(event) { 
event .preventDefault (); 
this.setState(state => ({ showLocationpPpicker: 
lIstate.showLocationPicker }));} 
} 
renderLocationControls() { 
return ( 
<div className="controls"> 
<button onClick={this.handleSubmit}>Post</button> 
{this.state.location && this.state.locationSelected ? ( 
<button onClick={this.handleRemoveLocation} 
className="open location-indicator"> 
<i className="fa-location-arrow fa" /> 
<small>{this.state.location.name}</small> 
</button> 
和 
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<button onClick={this.handleToggleLocation)} 
className="open"> 
{this.state.showLocationpPicker ? 'Cancel' : 'Add 
lOcatlion FU 下 
于 
className={classnames( fa ，({ 
'fa-map-o': !this.state.showLocationPicker, 
'fa-times': this.state.showLocationPicker 
Fy 
/SS 
</button> 
站 
</div> 
); 
} 
render() 1 
return ( 
<div className="create-post"> 
<textarea 
value={this.state.content} 
onChange={this.handlePostChange} 
placeholder="What's on your mind?" 
/> 
{this.renderLocationControls()} 
<div 
className="location-picker" 
style={{ display: this.state.showLocationPicker ? 'block' 
'none' }} 


{!this.state.locationSelected && ( 
<LocationTypeAhead 
onLocationSelect={this.onLocationSelect} 
onLocationUpdate={this.onLocationUpdate)} 
/> 
) } 
<DisplayMap 
displayOonly={false} 
location={this.state.location)} 
onLocationSelect={this.onLocationSelect} 
onLocationUpdate={this.onLocationUpdate} 
ps 
</div> 
</div> 
); 


} 


export default CreatePost; 


这 是 一 个 比 前 几 章 创建 的 组 件 稍微 复杂 一 点 的 组 件 ,使 用 这 个 组 件 可 以 创建 帖子 并 为 这 些 帖 
子 添加 位 置信 息 , 根据 我 的 经 验 , 测试 更 大 更 复杂 的 组 件 进一步 强调 了 简洁、 可 读 测试 的 重要 性 。 
如 果 无 法 阅读 或 分 析 这 些 测试 文件 ， 自 己 今后 或 者 其 他 开发 者 又 该 为 之 奈何 ? 

代码 清单 9-7 展示 了 CreatePost 组 件 的 推荐 测试 骨架 。 方 法 尚 没有 多 到 让 阅读 测试 变 得 困难 ， 
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但 如 果 组 件 有 更 多 内 容 ， 可 以 添加 藤 套 的 describe 块 来 让 测试 变 得 更 容易 理解 。 代 码 清单 9-7 
中 的 函数 将 被 测试 运行 器 (本 例 中 是 Jest ) 执行 ， 可 以 在 这 些 测试 中 进行 断言 。 大 多 数 测试 都 遵 
循 同样 的 模式 。 导 入 要 测试 的 代码 ，mock 它 的 任何 依赖 项 从 而 将 测试 隔离 到 单个 功能 单元 ( 因 
此 ， 这 里 是 单元 测试 )， 然后 测试 运行 器 和 断言 库 将 一 起 运行 这 些 测 试 。 


代码 清单 9-7 测试 CreatePost 组 件 ( src/components/post/Create.test.js ) 





Jest.mock(mapbox" ); 
import React from 'react"; 
import renderer from 'react-test-renderer'; 


import CreatePost from '../../../src/components/post/Create'; 
describe('CreatePost', () => { ee Se 
test(' snapshot (0 = 在 这 里 使 用 一 个 describe 调用 但 在 更 大 的 测试 
文件 中 ， 可 以 有 多 个 describe 调用 甚至 舱 套 它们 
7 
test('handlePostChange', () => 1 
7 为 组 件 中 的 每 个 方法 创建 
test('handleRemoveLocation’', () => 1{ 一 个 测试 ， 包括 一 个 快照 来 
确保 其 正确 地 滨 染 


一 着 - 
test('handleSubmit"', () => 1{ 


小 这 


test('onLocationUpdate', () => { 
test('handleToggleLocation', () => { 
}); 

test('onLocationSelect', () => 1 

yi 

test('renderLocationControls', () => { 


下 
办 : 


如 果 按 照 一 致 的 模式 来 考虑 竺 测试 组 件 的 每 个 部 分 ， 开 发 和 测试 组 件 可 以 更 全 面 。 请 随意 遵循 对 目 
己 来 说 最 有 意义 的 结构 一 一 这 只 是 对 我 和 我 所 在 的 团队 有 帮助 的 结构 。 我 还 发 现 , 在 编写 任何 其 他 测试 
之 前 先 为 组 件 或 模块 编写 不 同 的 aescripbe 和 test 块 , 这 样 有 助 于 开始 编写 测试 。 我 发 现 ,如果 能 一 
次 性 把 这 个 搞定 ， epee 到 想 要 和 窗 盖 的 各 种 情况 ( 有 错 、 没 错 、 在 某 种 条 件 下 等 )。 


其 他 类 型 的 测试 Si a 
i 各 测试 、 pb 
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有 许多 专门 的 工具 来 操作 应 用 程序 并 模拟 所 有 可 能 存在 的 复杂 流程 。 Pe 
这 些 类 型 的 测试 ( 集成 测试 ) 可 能 会 涉及 一 个 或 多 个 不 同系 统 之 间 的 交互 。 如 果 还 记得 图 9-1 中 的 
测试 金字 塔 的 话 ， 应 该 知道 这 些 测试 可 能 需要 花费 大 量 时 间 来 编写 ， 很 难 维护 ， 并 且 往往 会 花费 大 量 金 
钱 。 当 考虑 测试 前 端 应 用 程序 "时 ， 可 能 认为 会 涉及 这 些 类 型 的 测试 。 我 们 已 经 看 到 情况 并 非 如 此 ( 非 
ee 0 
解 更 高 级 别 测试 的 跳板 ， a a 





a / ne 
Protractor。 


随 着 测试 骨架 设置 就 位 ， 就 可 以 开始 测试 CreatePost 组 件 了 。 先 测试 构造 次数 。 记 住 ,构造 阴 
数 是 设置 初始 状态 、 绑 定 类 方法 和 其 他 设置 发 生 的 地 方 。 要 测试 CreatePost 组 件 的 这 一 部 分 , 需要 
引 太 之 前 提 及 的 男 一 个 工具 Sinon。 我 们 需要 一 些 能 够 提供 给 组 件 使 用 而 又 不 依赖 其 他 模块 的 
测试 函数 。 使 用 Jest 可 以 为 测试 创建 mock 胃 数 , 从 而 使 测试 聚焦 于 组 件 本 身 并 防止 我 们 将 所 有 代 
码 绑 在 一 起 。 记得 我 之 前 说 过 当代 码 更 改 时 测试 应 该 失败 吗 ? 这 是 对 的 , 但 更 改 一 个 测试 时 不 应 该 
破坏 其 他 测试 。 与 第 规 代码 一 样 ， 测 试 应 该 是 解 看 的 ， 它 应 该 只 关注 其 测试 的 那 部 分 代码 。 

Jest 的 mock 因数 不仅 可 以 帮助 我 们 隅 离 代 码 ， 还 可 以 帮助 我 们 做 更 多 断言 。 我 们 可 以 对 组 
件 如 何 使 用 mock 函数 、mock 函数 是 否 被 调 以 及 使 用 哪些 参数 进行 调用 等 来 断言 。 代 码 清 单 9-8 
展示 了 如 何 为 组 件 设置 快照 测试 并 使 用 Jest 来 mock 组 件 所 需 的 一 些 基 本 属性 。 





代码 清单 9-8 编写 第 一 个 测试 ( src/components/post/Create.test.js ) 





Jest.mock('mapbox'"'); | ~ 本 汪汪 本 
bi Wout Ean "eatig 使 用 jest.mock 郧 数 告诉 Jest 在 测试 运 
import renderer from '‘'react-test-renderer'; 行 时 使 用 mock 而 不 是 真正 的 模块 
import CreateBost freom '../../../Srec/components /Bost/Create,; 
describe('CreatePost', () => 1 在 之 前 创建 的 外 部 describe 块 
test('snapshot', () => 1 中 创建 test 块 
Const BPEopSs = { ONnSubBbmits Jest.fn() }3 
const component = renderer.create(<CreatePost {...props} />); 
const tree = component .toJSON(),; 
expect (tree) .toMatchSnapshot () ; 
Fi 使 用 React Test Renderer 
a 县 创建 组 件 并 传人 props 
yys 断言 快照 匹配 
调用 toJSON 方 
创建 props 的 mock 对 象 并 使 法 生成 快照 
用 Jest 来 创建 mock 函数 


现在 手头 上 已 经 有 了 一 个 测试 , 可 以 测试 该 组 件 的 其 他 方面 。 这 个 组 件 主要 用 于 让 用 户 创 建 
帖子 并 回 其 中 附加 位 置 ， 因 此 我 们 需要 测试 这 些 功 能 区 域 。 我 们 将 从 测试 帖子 的 创建 开始 。 代 码 
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清单 9-9 展示 了 如 何 测试 组 件 中 的 帖子 创建 方法 。 


代码 清单 9-9 


]jest.mock ( "mapPbox ' ) ; 
import React from 'react'; \ 
import renderer from 'react-test-renderer'; 





测试 帖子 创建 ( src/components/post/Create.test.js ) 


import CreatePost from '../../../src/components/post/Create'; 
describe('CreatePost', () => { 
test('snapshot', () => { 
const props = { OnSubmit: Jest. fn() 于 7 
const component = renderer.create(<CreatePost {...props} />); 


const tree = component .toJSON (); 
expect (tree) .toMatchSnapshot () ; 
}); 


test('handlePostChange', () => 1 创建 要 使 用 的 
const props = { onSubmit: jest.fn() }; mock 属性 集 
const mockEvent = { target: { value: '‘'value' } }; 
CreatePost.prototype.setState = JjJest.fn(function(updater) { 
对 setState this.state = Object.assign (this.state, updater (this.state)); 
井 行 } ) ， 
ein 直接 实例 化 组 件 并 
以 便 确 保 | , . 
组 件 调用 const component = new CreatePost (props); 调用 其 方法 
component.handlePostChange (mockEvent); 
了 了 setState expect (Component .setState) .toHaveBeenCalled () ; 
并 且 更 新 expect (Component .setState.mock.calls.length) .toEqual (1) ; 
帖子 时 按 expect (component .state) .toEqual ({ 
valid: true, 
照 正确 的 content: mockEvent .target .Value， 
方式 更 新 locations: i 断言 组 件 调 用 了 正确 
状态 lat: 34.1535641, 的 方法 以 及 该 方法 正 
| 丽人 =118.1428119; 确 地 更 新 了 状态 
name: null 
} ， 
locationSelected: false, 
ShowLocationPicker: false 
} ) ; 
}); 1 
test('handleSubmit', () => { 创建 为 一 个 mock 事件 ， 
const props = { onSubmit: jest.fn() }; 以 模拟 组 件 将 会 从 事件 
const mockEvent = 1{ 中 接收 的 内 容 
target: { value: "Value"' }), 再 次 对 
preventDefault: JjJest.fn!() setState 进 
行 mock 


CreatePost.prototype.setState = jest.fnl(function(updater) 1{ 
this.state = Object.assign (this.state, updater (this.state)); 
上 这 
实例 化 另 一 个 组 件 并 设置 


const component = new CreatePost (props);} 组 件 的 状态 来 模拟 用 户 输 
component.setState(() => (1{ 入 帖子 内 容 


Valid: tiEUG: 
SOntearnts Cool Stuft1™ 


190 第 9 章 测试 React 组 件 


加 


Component . State = { 
上 true; 直接 修改 组 件 的 状态 ( 用 
content: "Content ' ， 于 测试 目的 ) 
location: "Blade 
locationSelected: true 
}; 用 创建 的 mock 事件 来 
component.handleSubmit (mockEvent); 处 理 帖子 提交 并 断言 调 
expect (component .setState) .toHaveBeenCalled () ; i 


expect (props.onSubmit) .toHaveBeenCalledqWith ({ 
content: "content'", 
location: 'place'"' 
} ) ; 
Ps 
}); 


最 后 ， 需 要 测试 组 件 的 其 余 功能 。CreatePost 组 件 除 了 让 用 户 创 建 帖子 ， 还 可 以 让 用 户 选 择 
位 置 。 其 他 组 件 通过 作为 属性 传递 的 回调 函数 来 处 理 位 置 更 新 ,但 我 们 仍 需要 测试 CreatePost 上 


与 此 功能 相关 的 组 件 方法 。 


记得 我 们 在 CreatePost 上 实现 了 一 个 子 泻 染 方法 ,可 以 使 用 它 来 让 阅读 CreatePost 的 fender 
方法 的 输出 更 容易 并 减少 混乱 。 我 们 也 可 以 用 与 Enzyme 或 React Test Renderer 测试 组 件 相 类 的 


方式 来 测试 它 。 代 码 清单 9-10 展示 了 CreatePost 组 件 的 剩余 测试 。 
代码 清单 9-10 


jest .mock ( "mapbox ' ) ; 
import React from "ITeact :; 
import renderer from ‘react-test-renderer'; 





测试 帖子 的 创建 ( src/components/post/Create.test.js ) 


import CreatePost from '../../../src/components/post/Create'; . 
describe('CreatePost', () => 1{ 
test('handleRemoveLocation', () => I 
const props = { onSubmit: JjJest.fn() }; 


对 setState CreatePost .prototype.setState = jest.fnl(function (updater) 
进行 mock | 


}); 调用 handleRemoveLocation 


const component = new CreatePost (props); E 
component .handleRemoveLocation (); 盟 数 
expect (ComPonent .state .LocationSelected) .toEqual (false) ; 
} ) ; 
test('onLocationUpdate', () => I 
const Props = { onSubmit: Jest.fn() }; 
CreatePost.prototype.setState = JjJest.fnl(function (updater) 


this.state = Object.assign (this.state, updater (this.state)); 
\ 


F 
const component = new CreatePost (props); 对 剩余 组 件 方法 
component .onLocat1ionUpadate ({ 

Dats 

LT 

name: "name， 


}); 


重复 相同 的 过 程 





{ 
this.state = Object.assign(this.state, updater (this.state)); 






{ 


断言 以 正确 的 方式 
更 新 了 状态 


对 剩 
余 组 
件 方 
法 重 
复 相 
同 的 
过 程 


> 
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expect (component .setState) .toHaveBeenCalled ();，; 
expect (component .state.location) .toEqual ({ 
da 
i 
name: ‘name' 


| 
\ 


test('handleToggleLocation', () => { 


}) 


const props = { onSubmit: Jest.fn() }; 

const mockEvent = { 
preventDefault: jest.fnl() 

}; 

CreatePost.prototype.setState = JjJest.fn(function(updater) { 
this.state = Object.assign (this.state, updater (this.state) ) ; 

}); 

const component = new CreatePost (props); 

component .handleToggleLocation (mockEvent); 

expect (mockEvent .preventDefault) .toHaveBeenCalled () ; 

expect (component .state.showLocationPicker) .toEqual (true); 


test('onLocationSelect', () => { 


const props = { onSubmit: jest.fn() }; 
CreatePogst .prototype.setState = jest.fn(function (updater) { 
this.state = Object.assign(this.state, updater (this.state)); 
} ) ; 
const component = new CreatePost (props); 
component .onLocationSelect ({ 
Bs 
LN 汪 ， 
name: "name 


}) ; 


test('onLocationSelect"', () => { 


const props = { onSubmit: Jest.fn().}; 
CreatePost.prototype.setState = jest.ftn(function (updater) { 
this.state = Object.assign(this.state, updater (this.state)); 
}); 
const component = new CreatePost (props); 
component .onLocationSelect (1 
下 
Fngs .2 
name: ‘name' 
}); 
expect (component .setState) .toHaveBeenCalled (); 
expect (component .state.location) .toEqual ({ 


A 了 了 
ng 27 
name: "narme 
} ) 7 为 创建 的 子 render 方法 
} ) ; 创建 男 一 个 快照 测试 
test('renderLocationControls', () => { 
const props = { onSubmit: Jest.fn(}) };» 
const component = renderer.create(<CreatePost {...props} />); 


}); 


let tree = component .toJSON(); 
expect (tree) .toMatchSnapshot () ; 
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9.3.4 ”测试 覆盖 这 


现在 我 们 已 经 亲自 测试 了 一 些 组 件 ， 引 我 们 看 看 测试 种 盖 率 并 看 一 下 取得 了 哪些 进展 。 在 命令 行 
终端 , 终止 测试 运行 器 , 然后 执行 代码 清单 9-11 中 的 命令 , 该 命令 将 打开 Jest 中 包含 的 coverage 选项 


代码 清单 9-11 ”启用 测试 覆盖 率 { 项 目 根 目录 ) 、 





> NPM Un CeST:Y 

一 旦 测试 运行 器 执行 完 测 试 ， 它 就 会 输出 一 个 类 似 于 图 9-3 的 彩色 表格 ( 履 盖 率 更 小 ) 于 
图 展示 了 带 有 每 列 注释 的 Jest 履 盖 率 输 出 。 有 不 同形 式 ( 如 HTML ) 的 可 谈 的 代码 复 盖 率 报 4 
但 在 开发 过 程 中 终 闪 输出 是 最 有 用 的 ， 因 为 它 可 以 提供 即时 反馈 。 


语句 的 测试 。 远 辑 分 支 的 测试 函数 的 测试 ”文件 总 行 数 的 测试 根本 没有 运行 
覆盖 百分比 覆盖 百分比 闭关 百 分 比 。 入 六 百分比 到 的 源 文件 的 行 
ee SS- 于 划 


Se pe oe 
ry ~、 x 了 


Src/components/ comment 


源 文件 


navbar , ]S 


Avatar .JS 





图 9-3 Jest 的 测试 覆盖 率 输出 显示 了 项 目 中 不 同文 件 的 覆盖 率 统计 数据 。 每 一 列 反 映 了 不 同方 面 的 
覆盖 率 。 对 于 每 种 覆盖 率 ，Jest 会 显示 已 覆盖 的 百分比 。 语 句 和 函数 是 简单 的 JavaScript 语句 和 
函数 ， 而 分 支 是 逻辑 分 支 。 如 果 测 试 没有 处 理 if 语句 的 一 个 分 支 ， 就 会 在 Uncovered Lines 列 的 

代码 覆盖 率 中 反映 出 来 ， 也 会 在 分 支 覆盖 的 百分比 统计 中 反映 出 来 
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Istanbul 是 生成 图 9-3 中 统计 数据 的 工具 。 如果 想 看 到 更 详细 的 覆盖 信息 , 请 打开 带 有 coverage 
选项 的 jest 命令 生成 的 coverage 目录 。 在 这 个 目录 中 ，Istanbul 创建 了 一 些 文件 。 如 果 在 浏览 
华中 打开 ./coverage/lcov-report/index.html， 应 该 会 看 到 类 似 图 9-4 所 示 的 内 容 。 


pt ee oe ee et OEE EY tt rp Trees te tbon er torton PP et cen thawte se 


| 78.76% Stataments m/e 68.759% Eranches wwe 66.27% Funaotions ss 80.18% Lines va 
| 





File ~ Statements ~ Branches Functions : 
tb ER 85.71% 30%5 | 100% 414 87.5%6 7/8 

wo/beckenld mm ec.42% e139 100% om 0% om5 

s/components/nd Pe | 100% 3 100% om 100% Mt 

sre/components/comment mom 于 89.23% 18/26 58.33% 7112 63.64 旺 2111 

ro/compononts/ney RN 83.33% 10/12 SO% 2 71.43 和 0 8/7 

wc/componenta/post Wo 89.38% 42p47 抽打 骆 16/24 81.25% 13/16 8.36% 42/47 | 
so/ oomMponerits/router Da 87.443 38/39 z 91.67% 41441 多 D0.91% | 1011 : 97.3% 全 36m7 | 
gre/components/ welcome Wo 100% | 22 100% 0m 100% V1 100% ?2j2 
sre/containers WO 50% 1 00 50% 48 so% 122 5278% 19n96 
ro/history \ | 66.67% 2 100% on ph 1 0 100% 2 ] 





9-4 lstanbul 以 计算 机 可 读 和 人 类 可 读 的 格式 生成 覆盖 率 元 数据 。 这 里 展示 的 覆盖 率 报告 对 于 更 
详细 地 探究 代码 覆盖 率 非 党 有 用 。 我 们 甚至 可 以 按照 不 同 的 列 进行 排序 并 优先 选 出 低 覆 盖 率 的 文件 。 
注意 ， 这 些 列 有 语句 、 分 支 ( if/else 语句 )、 函 数 ( 调用 了 哪些 函数 ) 和 行 ( 代码 行 ) 


Istanbul 的 输出 很 用， 但 也 可 以 深入 到 不 同文 件 中 ， 获 得 关于 单个 文件 更 深入 的 信息 。 每 
个 文件 应 该 展示 不 同行 被 覆盖 的 次 数 以 及 哪些 行 没有 被 覆盖 的 信息 。 大 多 数 情况 下 , 高 层 摘要 已 
经 足够 好 了 ,但 有 时 可 能 想 要 检视 单个 报告 ， 就 像 图 9-5 中 的 报告 。 当 编写 测试 时 ， 一 旦 覆盖 了 
所 有 用 例 ， 我 襄 欢 至 少 看 一 遍 这 些 文件 ， 以 确保 没有 遗漏 任何 边缘 用 例 或 逻辑 分 支 。 


Al files / src/components/post Content.js 
100% Statements 4/4 100% Branches ‘we 100% Functions a1 1009% Linas #4/4 





3 WH const Content = {props) => { 
机 CONnsSt { post } = props; 


1 import React, { PropTypes } from PC | 
$5$ Rx return { 
6 “p ClossName-"content" 
7 {post, content)} 
[| </p> 

| 9 ); 

| 10 }; 

] 12 3x Content,propTypes = { 
13 post: PropTypes, object, 
14 }; 
15 export { Content }; 
Ih 





be 一 一 一 or tse hee eens ett btee dh eer dh 


9-5 lstanbul 生成 的 单个 文件 覆盖 率 报 告 。 可 以 看 到 有 不 同行 被 覆盖 了 多 少 次 
或 者 未 被 覆盖 ， 从 而 准确 地 了 解 代 码 覆 盖 了 代码 的 哪些 部 分 


对 软件 开发 来 说 , 测试 覆盖 率 是 一 个 重要 而 有 用 的 工具 , 但 不 能 把 它 当 作 代码 正常 工作 的 神 


194 第 9 章 测试 React 组 件 


奇 保证 。 虽然 可 以 达到 100% 的 覆盖 率 , 但 仍旧 有 代码 会 出 错 。 从 技术 上 讲 , 也 存在 0% 窗 盖 率 的 
工作 代码 。 覆盖 率 是 为 了 确保 测试 执行 了 代码 的 所 有 不 同 部 分 , 而 不 是 保证 没有 错误 或 性 能 之 类 
的 问题 , 但 它 对 这 些 是 有 用 的 ， 而且 当 考 虑 代码 “完整 度 ” 时 ,覆盖 率 应 该 被 当 作 一 个 重要 的 数 
据点 。 我 曾 在 的 团队 对 特定 用 户 故事 或 任务 的 成 功 定 义 ( 除了 其 他 方面 ) 包括 代码 履 盖 率 超 过 
80% 、 总 体 覆 盖 率 没有 下 降 。 用 履 盖 率 作为 代码 是 否 被 测试 过 的 指导 ， 并 检查 测试 进度 。 


练习 9-2 对 覆盖 率 的 思考 
我 们 在 本 章 讨论 了 测试 覆盖 率 。 那么 ok 天虹 厅 是 宙 的 吧 代码 覆盖 率 在 
测试 中 应 该 扮演 什么 角色 ? Si 


9.4 小结 


在 本 章 中 ,我们 了 解 了 测试 背后 的 一 些 原 则 以 及 如 何 测试 React 应 用 程序 。 

国 ”测试 是 对 软件 假设 进行 验证 的 过 程 。 它 可 以 帮助 我 们 更 好 地 规划 组 件 ， 防 止 将 来 发 生 问 
题 ， 并 有 助 于 提高 对 代码 的 信心 ， 其 在 快速 开发 过 程 中 扮演 着 重要 的 角色 。 

国 于 工 测试 无 法 很 好 地 扩展 ， 因 为 再 多 的 人 也 不 能 迅速 并 充分 地 测试 复杂 的 软件 。 

国 我 们 在 软件 测试 过 程 中 使 用 了 各 种 各 样 的 工具 ,包括 从 运行 测试 的 工具 到 确定 代码 覆盖 
率 的 工具 。 

图 不 同类 型 的 测试 应 该 以 不 同 的 比例 进行 。 单 元 测试 应 该 是 最 和 常见 的 并 且 编 写 起 来 简单 、 
便宜 和 快速 。 集 成 测试 要 测试 系统 许多 不 同 部 分 之 间 的 交互 ， 其 很 脆弱 并 需要 更 长 时 间 
来 编写 。 它 们 应 该 并 不 那么 常见 。 

国 可 以 使 用 各 种 各 样 的 工具 来 测试 React 组 件 。 因 为 React 组 件 只 是 函数 ; 所 以 可 以 严格 地 
测试 它们 。 但 Enzyme 这 样 的 工具 可 以 使 测试 React 组 件 变 得 更 加 容易 。 

四 简洁 的 测试 就 像 任何 简洁 的 代码 一 样 ， 易 于 阅读 、 组 织 恨 好 并 使 用 了 适当 比例 的 单元 测 
试 、 服 务 测试 和 集成 测试 。 它们 应 该 提供 有 意义 的 保证 确保 事物 以 特定 的 方式 运行 
并 且 应 该 保证 对 组 件 的 更 改 能 够 被 评估 。 

我 们 将 在 下 一 草 介 绍 Letters Social 应 用 程序 的 更 健壮 的 实现 并 探索 Redux 架构 模式 。 在 继续 

学 : 习 之 前 ， 看 看 能 不 能 继续 磨炼 一 下 自己 的 测试 技能 ， 让 测试 覆盖 率 达 到 90% 以 上 。 





React 应 用 架构 


六 至 第 二 部 分 结束 时 ， 我 们 已 经 将 Letters Social 示例 应 用 从 一 个 简单 的 静态 页 面 
转换 为 具有 路 由 、 刁 份 验证 和 动态 数据 的 动态 用 户 界面 。 在 第 三 部 分 ， 我 们 将 
通过 探索 一 些 React 的 高 级 主题 来 为 我 们 所 创建 的 东西 添砖加瓦 。 
第 10 章 和 第 11 章 将 探索 Flux 应 用 架构 并 实现 Redux。Redux 是 Flux 模式 的 一 种 变 
体 , Flux 已 经 成 为 大 型 React 应 用 事实 上 的 状态 管理 解决 方案 。 我 们 将 探索 Redux 的 概念 
并 将 示例 应 用 转换 为 使 用 Redux 作为 状态 管理 解决 方案 。 在 此 过 程 中 将 继续 为 Letter Social 
添加 评论 和 点 赞 的 功能 。 
第 12 草 将 进一步 研究 如 何在 服务 器 上 使 用 React。 归 功 于 Node.js 服务 器 运行 时 的 可 
用 性 , 开发 者 可 以 在 服务 右上 执行 React 代码 。 我 们 将 探索 使 用 React 进行 服务 器 端 泻 染 ， 
甚至 将 Redux 状态 管理 集成 到 该 过 程 中 。 我 们 还 将 集成 React Router 这 个 流行 的 React 路 
由 库 。 
最 后 ， 第 13 章 将 略微 偏离 React 的 Web 应 用 并 探索 React Native。React Native 是 另 一 个 
React 项 目 ， 其 使 开发 者 可 以 编写 能 够 在 i0S 和 Android 移动 设备 上 运行 的 React 应 用 。 
第 三 部 分 结束 时 ， 我 们 将 创建 一 个 充分 利用 React、Redux 和 服务 器 端 泻 染 的 完整 应 
用 。 虽然 即将 完成 React 的 初步 尝试 ， 但 读者 将 能 够 继续 增强 React 的 能 力 并 探索 其 他 像 
React Native 这 样 的 高 级 主题 。 
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到 目前 为 止 ， 我 们 已 经 能 够 创建 经 过 测试 、 处 理 动态 数据 、 接 收 用 户 输入 并 能 够 与 远程 API 
通信 的 React 应 用 。 这 包含 了 不 少 东 西 并 涵盖 了 典型 Web 应 用 要 处 理 的 大 部 分 功能 , 你 可 能 觉得 
接 下 来 只 需 勤 加 练习 即 可 。 虽 然 将 技能 用 于 实践 有 助 于 掌握 React， 但 是 对 构建 更 大 更 复杂 的 应 
用 来 说 ， 还 有 一 个 重要 的 领域 需要 掌握 : 应 用 架构 。 应 用 架构 是 “定义 满足 所 有 技术 和 运营 需求 
的 结构 化 解决 方案 的 过 程 , 同时 优化 常见 的 质量 属性 , 如 性 能 、 安全 性 和 可 管理 性 ”( 摘 目 Microsoft 
Application Architecture Guide， 第 2 版 )。 架 构 会 问 :“ 好 吧 ， 我 们 能 做 这 个 ， 但 如 何 能 更 好 且 一 
致 地 实现 它 呢 ? ”应 用 如 何 有 效 组 织 、 数 据 如 何 流转 以 及 职责 如 何 分 配给 系统 的 不 同 部 分 , 这 都 
是 涤 构 上 需要 考虑 的 问题 。 

所 有 应 用 都 有 某 种 隐 含 的 架构 ,只 是 因为 应 用 拥有 结构 并 以 某 种 特定 的 方式 工作 。 这 里 讨论 
的 是 构建 复杂 应 用 的 策略 和 范式 。React 宁可 成 为 专注 UI 的 小 而 灵活 的 框架 , 因此 当 构建 更 复杂 
的 应 用 时 ， 它 没有 内 置 的 策略 供 使 用 者 遵循 。 

只 是 没有 可 供 使 用 的 内 置 策略 ， 并 不 意味 着 没有 其 他 选择 。 使 用 React 构建 复杂 应 用 的 方法 
有 很 多 ， 其 中 很 多 都 是 基于 Facebook 工程 师 推广 的 Flux 模型 。Flux 与 流行 的 MVC 架构 的 不 同 
之 处 在 于 它 提 倡 单 向 数据 流 ， 引 入 了 新 概念 ( dispatcher、action、store ) 以 及 其 他 方面 。Flux 和 
MVC 关注 的 是 比 应 用 的 外 观 甚或 构建 应 用 所 用 的 一 些 特定 的 库 或 技术 更 高 层面 的 东西 。 它 们 更 
关注 应 用 如 何 组 织 、 数 据 如 何 流 转 ， 以 及 职责 如 何 分 配给 系统 的 不 同 部 分 。 

本 章 探讨 的 是 Flux 模式 中 使 用 最 广泛 和 最 受 好 评 的 变种 之 一 : Redux。 虽 然 在 React 应 用 中 使 用 
Redux 是 极其 常见 的 ， 但 实际 上 它 可 以 用 于 大 多 数 JavaScript 框架 ( 内 部 使 用 或 其 他 方式 )。 本 章 和 
下 一 章 将 介绍 Redux 的 核心 概念 〈action 、 中 间 件 、reducer 、store 等 )， 然 后 介绍 将 Redux 与 React 
应 用 集成 。Redux 中 的 action 表示 要 完成 的 工作 ( 获取 用 户 数据 、 登 录用 户 等 )，reducer 决定 状态 应 
该 如 何 变化 ，store 集中 保存 状态 的 副本 ， 中 间 件 允许 开发 者 将 自 定义 行为 注入 流程 中 。 
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如 何 获取 本 章 代码 
， ”和 每 章 一 样 ， 读者 可 以 去 GitHub 合 库 检 出 源 代码 。 如 果 想 从 头 开始 编写 本 章 代码 ， 可 以 使 用 第 9 
a) 或 直接 检 出 指定 章 的 分 支 ee 





者 可 以 在 生日 录 下 和 下 全 信之 一 来 区 到 当 前 间 的 代 因 。 
。 如 果 还 没有 代码 库 ， 请 输入 下 面 的 命 VF 令 来 获取 : 





0 clone gitegithub。 com: react-in-action/letters- -social. git ) 

”如 果 已 经 吉隆 过 代码 仓库 : 。 
git checkout chapter-10- 1 \ te at ac 
条 人 是 从 其 他 刘 来 到 这 里 的， 了 所有 下 的 人 2 


| ee 多 0 pm ins stall 








10.1 Fiux 应 用 架构 


现代 应 用 必须 比 以 往 做 得 更 多 , 相应 地 也 更 加 复杂 一 一 内 部 和 外 部 都 是 如 此 。 开 发 者 们 早 就 
意识 到 缺乏 一 致 设计 的 复杂 应 用 的 增长 所 造成 的 混乱 。 意大利 面条 似 的 代码 不 仅 没有 乐趣 ,还 会 
拖 慢 开发 者 的 开发 进度 ， 进 而 拖 慢 业务 单元 的 进度 。 还 记得 上 一 次 在 满 是 一 次 性 解决 方案 和 
jQuery 插件 的 大 型 代码 库 中 的 工作 吗 ? 估计 这 不 会 有 趣 。 为 了 对 抗 混乱 ， 开 发 者 们 开发 了 MVC 
(模型 -视图 -控制 副 ) 这 样 的 范式 来 组 织 应 用 的 功能 并 指导 开发 。Flux ( 及 其 扩展 Redux ) 与 此 
相同 ， 都 是 为 了 帮助 开发 者 处 理应 用 中 不 断 增 加 的 复杂 性 。 

如 有 果 不 是 特别 熟悉 MVC 范式 ， 也 不 必 担 心 ， 在 本 书 中 我 们 不 会 花 太 多 时 间 讨 论 它 。 但 为 了 
便于 比较 ， 在 讨论 Flux 和 Redux 之 前 ， 先 简单 讨论 一 下 MVC。 下 面 是 一 些 基 础 知识 。 

图 模型 ( model ) 一 一 应 用 的 数据 。 通 常 是 像 User、Account 或 Post 这 样 的 名 词 。 模 型 至 少 

应 该 拥有 操作 关联 数据 的 基本 方法 。 在 最 抽象 的 意义 上 ， 模 型 表示 原始 数据 或 知识 。 模 
型 是 数据 与 应 用 代码 交互 的 地 方 。 例 如 ， 数 据 库 可 能 存储 诸如 accessScope、 
authenticated 等 属性 , 而 模型 能 够 在 它 上 面 的 ijsAllowedAccessForResource () 
这 样 的 方法 中 使 用 这 些 数据 ， 这 些 方法 将 对 模型 的 底层 数据 进行 操作 。 模 型 是 原始 数据 
与 应 用 代码 汇聚 的 地 方 。 

图 视图 〈view ) 一 一 模型 的 表示 。 视 图 通 稼 是 用 户 界 面 本 身 。 视 图 中 不 应 有 任何 与 数据 表 
不 无 关 的 钦 辑 。 对 于 前 端 框 架 ， 这 通常 意味 着 特定 视图 直接 与 资源 关联 并 具有 与 之 关联 
的 CRUD (创建 、 读 取 、 更 新 、 删 除 ) 操作 。 前 端 应 用 不 再 总 按 此 方式 构建 。 

图 控制 器 ( controller ) 控制 帮 是 将 模型 和 视图 绑 在 一 起 的 “ 忒 合剂 "。 控 制 疾 通常 应 该 
只 是 黏合 剂 而 不 做 更 多 的 事情 ( 例如 ， 它 们 不 应 该 包含 复杂 的 视图 或 数据 库 逻 辑 )。 一 般 
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来 说 ， 控 制 絮 对 数据 进行 修改 的 能 力 应 该 远 低 于 它们 所 交互 的 模型 。 

虽然 本 章 重 点 讨论 的 范式 (Flux 和 Redux ) 与 这 些 概念 大 相 径 庭 ,但 其 目标 仍 是 帮助 开发 者 
创建 可 伸缩 的 、 合 理 的 和 有 效 的 应 用 架构 。 

Redux 的 起 源 和 设计 要 归功 于 Facebook 内 部 流行 的 一 种 称 为 Flux 的 模式 。 如 果 熟 悉 Ruby on 
Rails 和 其 他 应 用 框架 所 使 用 的 流行 MVC 模式 ， 那 么 Flux 可 能 与 你 习惯 的 模式 有 所 不 同 。Flux 
没有 将 应 用 的 各 个 部 分 分 解 为 模型 、 视 图 和 控制 锅 ， 而 是 定义 了 和 在 干 不 同 部 分 。 

国 store 一 一 store 包含 应 用 的 状态 和 逻辑 。 它 有 点 儿 像 传统 MVC 中 的 模型 。 然 而 ， 它 们 管 

理 许多 对 象 的 状态 ， 而 不 是 表示 单个 数据 库 记 录 。 与 模型 不 同 的 是 ， 开 发 者 可 以 以 任何 
合理 的 方式 表示 数据 ， 不 受 资 源 的 限制 。 








国 action Flux 应 用 程序 并 不 是 直接 更 新 状态 , 而 是 通过 创建 修改 状态 的 action 来 修改 应 
用 状态 。 
国 View 用 户 界 面 ， 通 常 是 React， 但 Flux 并 不 需要 React。 





国 ”dispatcher 一 一 对 store 进行 操作 和 更 新 的 一 个 中 心 化 协调 硕 。 
图 10-1 展示 子 Flux 的 概览 。 





10-1 一 个 简单 的 Flux 概览 


如 图 10-1 所 示 ， 在 Flux 模式 中 ，action 是 从 视图 中 创建 的 ( 可 能 是 用 户 点 击 了 某 个 东西 )， 
然后 dispatcher 处 理 传人 的 action, 之 后 将 action 发 送 到 适当 的 store 中 以 更 新 状态 。 状态 变化 后 ， 
通知 视图 应 该 使 用 新 数据 ( 如 果 可 以 应 用 的 话 )。 请 注意 这 与 典型 MVC 风格 的 框架 有 何不 同 ， 
在 MVC 风格 的 框架 中 ,视图 和 模型 ( 如 此 处 的 store ) 都 能 够 更 新 彼此 。 这 种 双 回 数据 流 不 同 于 
Flux 架构 中 典型 的 更 为 单身 的 数据 流 。 另 外 ， 请 注意 这 里 缺少 中 间 件 : 尽管 可 以 在 Flux 中 创建 
中 间 件 ， 但 它 不 像 在 Redux 中 那样 是 一 等 公民 ， 因 此 我 们 在 这 里 省 略 了 它 。 

如 果 之 前 开发 过 MVC 风格 的 应 用 ， 其 中 一 些 内 容 听 起 来 很 熟悉 ， 但 数据 流转 方式 可 能 就 不 
是 这 样 了 。 如 前 所 述 , 数据 在 Flux 范式 中 更 多 的 是 单 回 流动 , 这 与 MVC 类 型 的 实现 倾向 于 使 用 
的 双向 方式 不 同 。 这 通常 意味 着 应 用 中 数据 流 没 有 单一 的 来 源 ; 系统 的 许多 不 同 部 分 都 有 权 修 改 
状态 , 而 且 状 态 通 常 分 散在 整个 应 用 中 。 这 种 方式 在 很 多 情况 下 都 能 很 好 地 工作 , 但 在 较 大 的 应 
用 中 ,调试 和 使 用 时 可 能 会 令 人 费解 。 

想象 一 下 ， 在 一 个 中 到 大 型 的 应 用 中 ， 这 会 是 什么 情形 。 假设 有 一 组 模型 (用户 、 账 户 和 号 份 
验证 )， 它 们 与 自己 的 控制 器 和 视图 相关 联 。 在 应 用 中 的 任何 地 方 ， 都 很 难 确定 状态 的 确切 位 置 ， 因 
为 状态 分 布 在 应 用 的 各 个 部 分 ( 可 以 在 之 前 提 到 的 3 个 模型 中 的 任何 一 个 中 找到 关于 用 户 的 信息 )。 

对 较 小 的 应 用 来 说 , 这 可 能 未 必 是 问题 ,甚至 可 以 在 较 大 的 应 用 上 也 能 很 好 地 工作 , 但 在 大 
型 客户 端 应 用 中 ， 它 可 能 变 得 更 加 困难 。 例 如 ， 当 需要 在 50 个 不 同 的 位 置 修改 模型 的 使 用 并 且 
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有 60 个 不 同 的 控制 器 需要 了 解 状态 的 更 改 时 ， 会 发 生 什么 情况 ? 让 事情 变 得 更 复杂 的 是 ， 视 图 
有 时 在 某 些 前 端 框 架 中 表现 的 就 像 模型 一 样 〈 因此 状态 更 为 分 散 了 )。 数 据 的 真实 来 源 在 哪里 ? 
如 果 它 分 散在 视图 和 许多 不 同 的 模型 中 , 并 且 所 有 这 些 都 处 于 中 等 复杂 的 设置 中 , 那么 在 心里 跟 
踪 所 有 内 容 将 是 很 困难 的 。 这 还 可 能 导致 应 用 状态 不 一 致 ， 这 会 引发 应 用 bug， 因 此 这 不 只 是 一 
个 “只 有 开发 人 员 才 面 对 ” 的 问题 ， 最 终 用 户 也 会 受到 二 接 影 啊 。 

这 之 所 以 困难 的 部 分 原因 在 于 ,人们 通常 不 善于 推断 随时 间 发 生 的 变化 。 为 了 真正 理解 这 个 
问题 ， 想 象 脑海 中 有 一 个 棋盘 。 在 脑子 里 保持 一 张 甚至 几 张 棋盘 的 快照 并 不 难 ， 但 能 跟踪 20 个 
回合 的 每 个 棋盘 快照 吗 ? 30 回合 呢 ? 整 局 对 弈 呢 ? 正 因为 在 脑海 中 跟踪 数据 随时 间 的 异步 变化 
很 困难 , 所 以 我 们 应 该 构建 更 易于 我 们 思考 和 使 用 的 系统 。 例 如 , 考虑 调用 远程 API 并 使 用 其 数 
据 更 新 应 用 状态 。 对 数量 较 少 的 情况 来 说 这 很 简单 ， 但 如 果 需 要 调用 50 个 不 同 的 API 服务 硕 病 
点 并 且 需 要 跟踪 进入 的 响应 ， 与 此 同时 用 户 仍 在 使 用 应 用 并 进行 可 能 引起 更 多 API 交互 的 改变 
时 ， 那 么 会 怎么 样 ? 很 难 在 脑海 中 将 它们 梳理 清楚 并 预测 变化 的 结 来 。 

你 可 能 已 经 注意 到 React 和 Flux 之 间 的 一 些 相 似 性 。 它 们 都 是 相对 较 新 的 一 种 构建 用 户 界面 
的 方式 而 且 都 旨 在 改进 开发 人 员 使 用 的 心智 模型 。 在 这 两 种 方式 中 , 变化 应 该 很 容易 推 新 ,并且 
开发 者 应 该 能 够 以 一 种 增强 而 不 是 碍 事 的 方式 构建 UI。 

Flux 在 实际 代码 中 是 什么 样子 呢 ? 它 主要 是 一 个 范式 ， 所 以 有 很 多 库 实 现 了 Flux 的 核心 思 
想 。 这 些 库 在 实现 Flux 的 方式 上 略 有 不 同 。Redux 也 一 样 ， 尽 管 它 独特 的 Flux 风格 已 经 获得 了 
最 多 用 户 和 关注 。 其 他 Flux 库 包 括 Flummox 、Fluxxor、Reflux 、Fluxible 、Lux 、McFly 和 MartyJS 
(尽管 在 实践 中 与 Redux 相 比 这 些 库 使 用 得 很 少 )。 


10.1.1 初 识 Redux: Flux 的 一 个 变 


也 许 Redux 是 实现 Flux 背后 思想 的 使 用 最 广泛 且 最 知名 的 库 。Redux 这 个 库 以 稍 加 修改 的 
方式 实现 了 Flux 的 思想 。Redux 的 文档 将 其 描述 为 “JavaScript 应 用 的 可 预测 状态 容 硕 "。 具 体 而 
言 ， 这 意味 着 它 通 过 自己 的 方式 将 Flux 的 概念 和 思想 付 诸 了 实践 。 

确定 Flux 的 确切 定义 在 这 里 并 不 重要 , 重要 的 是 我 将 介绍 Flux 和 Redux 范式 之 间 的 一 些 重要 
区 别 。 

国 Redux 使 用 单一 的 store 一 一 Redux 应 用 没有 在 应 用 中 的 多 个 store 中 存放 状态 信息 , 而 是 

将 所 有 东西 都 保存 在 一 个 地 方 。Flux 可 以 有 多 个 不 同 的 store。Redux 打破 了 这 一 规则 并 
强制 使 用 单个 全 局 store。 
国 Redux 引入 了 reducer 一 一 reducer 以 一 种 更 不 可 变 的 方式 进行 变更 。 在 Redux 中 , 状态 以 
一 种 确定 的 、 可 预测 的 方式 被 改变 , 一 次 只 修改 一 部 分 状态 , 并 且 只 发 生 在 一 个 地 方 (全 
局 store 中 )。 

国 Redux 引入 了 中 间 件 一 一 因为 action 和 数据 流 是 单 癌 的 ， 所 以 开发 者 可 以 在 Redux 应 用 
中 添加 中 间 件 ， 并 在 数据 更 新 时 注入 目 定 义 行为 。 

图 Redux 的 action 与 store 不 耦合 一 action 创建 器 不 会 问 store 派发 任何 东西 ; 相反 ,它们 
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会 返回 中 央 调 度 右 使 用 的 action 对 象 。 
对 你 来 说 这 些 可 能 只 是 些 细微 差别 ,没关系 一 一 你 的 目标 是 学 习 Redux， 而 不 是 “ 找 不 同 ”。 
图 10-2 展示 了 Redux 架构 的 概览 。 我 们 将 深入 每 个 不 同 的 部 分 ， 探 索 它们 如 何 工 作 ， 并 为 你 的 
应 用 开发 一 个 Redux 架构 。 
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10-2 ”Redux 概览 


如 图 10-2 所 示 ，action 、store 和 reducer 构成 了 Redux 架构 的 主体 。Redux 使 用 一 个 中 心 化 
的 状态 对 象 ， 它 以 特定 的 、 确 定 的 方式 进行 更 新 。 当 开发 者 想 要 更 新 状态 时 (通常 是 由 于 单 击 之 
类 的 事件 )， 一 个 action 被 创建 出 来 。action 具有 特定 reducer 会 处 理 的 类 型 。 处 理 给 定 action 类 
型 的 reducer 会 生成 当前 状态 的 副本 ， 使 用 来 自 action 的 数据 对 其 进行 修改 ， 然 后 返回 新 状态 。 
当 更 新 store 时 ， 视 图 层 (此 处 是 React 组 件 ) 可 以 监听 更 新 并 相应 地 作出 响应 。 还 要 注意 ， 图 
中 的 视图 只 是 从 store 中 读 取 更 新 一 一 它们 并 不 关心 与 其 通信 的 数据 。React-redux 库 会 在 store 
更 改 时 将 新 的 props 传递 给 组 件 ， 但 视图 仍旧 只 是 接收 和 显示 数据 。 


10.1.2 ”为 Redux 做 准备 


Redux 是 一 种 应 用 架构 范式 ， 它 也 是 一 个 可 安装 的 库 。 这 是 Redux 超过 “原始 ”Flux 实现 的 
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一 个 方面 。Flux 范式 有 非常 多 的 实现 (如 Flummox、Fluxxor、Reflux、Fluxible、Lux、McFly 和 
MartyJS )， 它 们 都 有 不 同 程度 的 社区 支持 和 不 同 的 API。Redux 拥有 强大 的 社区 支持 , 但 Redux 库 
本 身 的 API 却 十 分 小 巧 而 强大 , 这 帮助 它 成 为 最 受 欢 迎 且 最 受 倚 重 的 React 应 用 架构 库 之 一 。 事实 
上 ，Redux 与 React 一 起 使 用 的 情况 非常 各 见 ， 以 至 于 两 个 核心 团队 经 稼 彼此 交流 ， 以 确保 兼容 和 
知晓 特性 。 有 些 人 其 至 同时 号 处 两 个 团队 ， 所 以 两 个 项 目 之 间 有 着 很 好 的 可 见 性 和 展 好 的 沟通 。 

为 了 设置 好 Redux 从 而 使 用 它 ， 需 要 做 一 些 工 作 。 

国 确保 使 用 当前 章 的 源 代 码 运 行 npm install， 以 便 所 有 正确 依赖 被 安装 到 本 地 。 我 们 

在 本 章 将 开始 利用 几 个 新 库 ， 包括 js-cookie、rudux-mock-store 和 redux。 

图 ” 安 寂 Redux 开发 者 工具 。 我 们 可 以 利用 它们 在 浏览 需 中 查看 Redux 的 store 和 action。 

Redux 被 设计 为 可 预测 的 ， 这 使 得 创建 令 人 惊异 的 调试 工具 变 得 容易 。Dan Abramov 和 其 他 
致力 于 Redux 和 React 库 的 工程 师 已 经 开发 出 了 一 些 处 理 Redux 应 用 的 强大 工具 。 因 为 Redux 
中 的 状态 是 以 可 预测 的 方式 变化 的 , 所 以 有 可 能 用 新 方式 进行 调试 : 开发 者 可 以 跟踪 应 用 状态 的 
单个 变化 ,检查 变化 之 间 的 差异 ,甚至 可 以 回 退 和 重 放 应 用 状态 随时 间 的 变化 。Redux Dev Tools 
扩展 可 以 让 使 用 者 完成 所 有 这 些 工 作 甚 至 更 多 ， 而 且 其 被 打包 为 浏览 器 扩展 进行 分 发 。 图 10-3 
快速 舌 探 了 了 Redux Dev Tools 拥有 的 功能 。 


人 ， 寺 


eriux Davroots 





10-3 ”Redux Dev Tools 扩展 将 来 自 于 Dan Abramov 的 流行 的 Redux Dev Tools 库 打包 成 一 个 
方便 的 浏览 器 扩展 。 有 了 它 ， 就 可 以 回 退 和 重 放 Redux 应 用 ， 逐 个 查看 变化 ， 检 查 状 态 
变化 之 间 的 差异 ， 在 一 个 区 域 检查 整个 应 用 的 状态 ， 生 成 测试 样板 ， 等 等 
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安 疹 好 扩展 后 ,应 该 能 在 浏览 锅 的 工具 栏 中 看 到 新 开发 工具 的 图 标 。 在 写作 本 书 时 ， 它 仅 会 
在 开发 模式 下 检测 到 Redux 应 用 实例 时 才 变 为 彩色 的 ， 所 以 如 果 访 问 的 应 用 或 网 站 没有 使 用 
Redux ， 扩 展 就 不 会 起 作用 。 不 过 一 旦 配置 好 应 用 ， 就 会 看 到 图 标 变 成 彩色 的 ， 并 且 点 击 它 会 打 
开 这 个 工具 。 


10.2 在 Redux 中 创建 action 


在 Redux 中 ，action 是 将 数据 从 应 用 发 送 给 store 的 信息 载体 。 除 了 action，store 没有 任何 
其 他 获取 数据 的 方式 。 整 个 Redux 应 用 使 用 action 来 发 起 数据 变更 ， 尽管 action 本 身 并 不 负责 
更 新 应 用 的 状态 ( store )。reducer 更 多 涉及 应 用 状态 的 更 新 , 我 们 将 在 action 之 后 了 解 reducer。 
如 果 你 习惯 于 按 自己 喜欢 的 方式 更 新 应 用 状态 ， 那 么 一 开始 可 能 不 会 喜欢 action。 它 们 可 能 需 
要 一 些 时 间 来 适应 ， 但 它们 会 让 应 用 更 容易 预测 、 更 容易 调试 。 如 果 应 用 的 数据 更 改 方式 受到 
严格 的 控制 ,就 可 以 很 容易 地 预测 应 用 中 什么 应 该 改变 而 什么 不 应 该 改变 ,图 10-4 展示 了 action 
在 更 大 图 景 中 的 位 置 。 我 们 将 从 action 开始 ， 随 后 一 路 经 过 store 、reducer， 最 后 回 到 React 来 
完成 数据 流 。 
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图 10-4 action 是 Redux 应 用 获悉 更 改 的 方式 ， 它们 有 类 型 信息 和 应 用 需要 的 任何 额外 信息 
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Redux 的 action 是 什么 样子 ? 它 是 一 个 普通 的 旧式 JavaScript 对 象 (POJO )， 具 有 一 个 必需 
的 type 属性 和 用 户 期 望 的 其 他 任意 内 容 。type 属性 将 被 reducer 和 其 他 Redux 工具 用 于 将 一 组 更 
改 关 联 在 一 起 。 每 一 种 唯一 类 型 的 action 都 应 该 具有 唯一 的 type 属性 。type 通常 应 该 定义 为 字 和 付 
串 常量 ， 可 以 随意 地 为 type 属性 指定 任何 唯一 的 名 称 ， 当 然 给 出 可 以 遵循 的 命名 模式 会 更 好 。 
代码 清单 10-1 展示 了 一 些 可 能 会 用 到 的 action 类 型 名 称 。 





代码 清单 10-1 一些 简单 的 Redux action 


type: 'UPDATE USER PROFILE', action 可 以 包含 一 些 信息 ,这 些 信息 会 告诉 应 
payload: { 用 应 该 如 何 做 更 改 , 如 一 个 新 的 用 户 电 子 邮件 
email: 'hello@ifelse.io' 地 址 、 错 误诊 断 或 其 他 信息 


} 


每 个 action 都 必须 有 


ee type， 如 果 没 有 , 应 用 type 通常 是 大 写 的 字符 串 常量 ， 如 此 就 
0 就 不 知道 需要 对 store 可 以 将 它们 与 应 用 中 的 常规 值 区 分 开 
做 什么 样 的 更 改 来 ,但 是 这 里 使 用 了 命名 空间 方案 来 确 


{ 保 action 不 但 是 唯一 的 ， 而 且 也 可 该 
type: appName/dashboard/insights/load' 
} 


通常 而 言 ， 应 该 持续 关注 action 的 大 小 以 便 它 们 只 包含 绝对 需要 的 信息 。 如 此 ， 可 以 避免 四 
处 传递 额外 的 信息 而 且 需 要 考虑 的 信息 会 更 少 。 代码 清单 10-1 展示 了 两 个 简单 的 action, 一 个 市 
有 额外 数据 ， 另 一 个 没有 。 注意 ,可 以 在 action 上 任意 命名 额外 的 键 , 但 如 果 命 名 不 一 致 的 话 可 
能 会 令 人 困惑 ， 对 团队 来 说 尤其 成 问题 。 


10.2.1 定义 action 类 型 


尽管 可 以 在 本 章 后 面 添加 更 多 内 容 , 但 现在 已 经 可 以 通过 列 出 一 些 action 类 型 , 开始 将 Letters 
Social 应 用 转换 为 Redux 架构 了 。 这 些 通常 会 映射 到 用 户 操作 ， 如 登录 、 登 出 、 更 改 表单 值 等 ， 
但 它们 不 一 定 非 得 是 用 户 操作 。 你 可 能 希望 为 已 打开 、 已 解析 或 已 经 发 生 错 误 的 网 络 请 求 或 其 他 
不 直接 与 用 户 相 关 的 事情 创建 action 类 型 。 

同样 值得 注意 的 是 ,在 较 小 的 应 用 中 ,开发 者 可 能 不 必 在 常量 文件 中 定义 action 类 型 ， 只 需 
记得 在 创建 action 或 自己 硬 编码 时 将 action 传人 人 就行。 但 这 么 做 的 缺点 是 随 看 应 用 的 增长 ， 跟 路 
action 类 型 将 成 为 一 个 痛 点 ， 并 可 能 导致 难于 调试 或 重 构 。 在 大 多 数 实际 情况 下 ， 开 发 者 将 定义 
action， 这 也 是 你 要 在 这 里 做 的 事情 。 

可 以 事先 拟定 一 些 预期 要 用 的 action 类 型 ， 并 根据 需要 自 由 地 添加 或 删除 。 这 里 将 使 用 命名 
空间 的 方式 来 处 理 action 类 型 ,但 请 记 住 ,在 创建 自己 的 action 时 ,可 以 遵循 自己 认为 最 好 的 模 
式 ， 只 要 这 些 类 型 名 称 是 唯一 的 即 可 。 也 可 以 在 对 象 中 “捆绑 ”类 似 的 action 类 型 ， 但 它们 也 可 
以 像 单 个 常量 一 样 轻 松 地 传播 和 导出 。 ”捆绑 ”的 优点 是 可 以 将 action 类 型 组 织 在 一 起 并 使 用 更 
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短 的 名 称 (GET、CREATE 等 ) 而 不 必 将 那些 信息 构建 到 变量 名 之 中 (UPDATE USER _ PROFILE、 
CREATE_NEW_POST 等 ), 代码 清单 10-2 展示 了 如 何 创建 初始 的 action 类 型 。 我 们 将 这 些 内 容 放 
在 src/constants/types.js 中 。 我 们 目前 将 创建 本 章 所 需 的 所 有 action， 以 便 之 后 可 以 引用 它们 ， 而 
不 必 总 是 回 到 这 个 文件 中 来 添加 。 





代码 清单 10-2 ”定义 action 类 型 ( src/constants/types.js ) 


export const: app = { 
ERROR: 'letters-social/app/error', 
LOADED: 'letters-social/app/loaded', 
LOADING: ‘letters-social/app/loading' 
}; 


export const auth = 1 
LOGIN_ SUCCESS: 'letters-social/auth/login/success', 
LOGOUT SUCCESS: 'letters-social/auth/logout/success' 
村- 


export const posts = { 

CREATE: '‘'letters-social/post/create', 

GET: 'letters-social/post/get', 

LIKE: ‘letters-social/post/like', 

NEXT: 'letters-social/post/paginate/next', 

UNLIKE: ‘letters-social/post/unlike', 

UPDATE LINKS: 'letters-social/post/paginate/update,' 
人 


export const comments = 1 
CREATE: 'letters-social/comments/create', 
GET: ‘'letters-social/comments/get', 
SHOW: 'letters-social/comments/show', 
TOGGLE: 'letters-social/comments/toggle' 
}; 


在 使 用 Redux 的 开发 者 工具 时 , 这 些 action 类 型 将 显示 在 应 用 状态 更 改 的 时 间 轴 中 ,因此 当 
有 许多 action 和 action 类 型 时 ， 像 代码 清单 10-2 中 那样 用 类 似 URL 的 方式 对 名 称 进行 分 组 会 使 
它们 更 容易 阅读 。 你 也 可 以 使 用 :字符 来 分 隔 它 们 (namespace:action name:status )， 或 
者 使 用 任何 对 你 来 说 最 有 意义 的 约定 。 


10.2.2 在 Redux 中 创建 action 


定义 这 些 action 类 型 之 后 ,就 可 以 开始 用 它们 来 做 一 些 事情 了 。 由 于 我 们 将 复 用 应 用 已 有 的 
部 分 多 和 辑 , 因此 很 多 代码 看 起 来 会 很 熟悉 。 ER 个 值得 简单 回顾 的 点 : 大 部 分 Redux 应 用 
不 应 该 完全 重 做 任何 现 有 的 应 用 逻辑 。 希望 读者 能 够 理 清 这 些 内 容 , 但 是 将 现 有 应 用 转换 为 使 用 
Redux 的 主要 工作 , 可 能 只 是 将 应 用 状态 的 不 同方 面 映 射 为 Redux 所 强制 的 模式 。 无 论 如 何 , 我 
们 将 从 action 开始 。 
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action 是 我 们 在 Redux 应 用 中 发 起 状态 变更 的 方式 , 我 们 不 能 像 在 其 他 框架 中 那样 直接 修改 
属性 。action 由 action 创建 器 (返回 action 对 象 的 函数 ) 创建 ， 并 由 store 使 用 dispatch 困 数 
进行 派发 。 

我 们 不 会 在 这 方面 走 得 太 远 。 我 将 首先 介绍 action 创建 器 本 身 。 从 简单 的 开始 ,创建 一 些 在 
加 载 开始 和 完成 时 向 应 用 发 出 提示 的 action。 当 前 还 不 需要 传递 任何 额外 的 信息 ， 但 接 下 来 会 介 
绍 参数 化 action 创建 器 。 代 码 清单 10-3 展示 了 如 何 为 “加 载 中 ”和 “已 加 载 ” 创 建 两 个 action 
创建 器 。 为 了 保持 组 织 和 条理， 我 们 将 把 所 有 action 创建 器 放 在 actions 文件 夹 中 ， 其 他 Redux 相 
关 的 文件 也 会 如 此 这 样 处 理 ，reducer 和 store 都 会 有 目 己 的 文件 夹 。 





代码 清单 10-3 “加 载 中 ”和 “已 加 载 ” 的 action 创建 器 ( Sektotlola l/lol: (ellaTo :NE 
import * as types from i 


export function loading() { 叶 人 类 型 

return 1{ 

type: 七 . LOADING 浊 

0 "een 加 载 中 ”类 型 , 返回 
} 一 个 带 有 所 需 的 type 键 的 action 对 象 
export function loaded() 1 x Sy | 

ratuxs be 己 加 载 ”action 

的 创建 需 


type: types.app.LOADED 
}; 
} 


10.2.3 ”创建 Redux store 并 派发 action 


action 创建 器 自身 并 不 会 做 任何 事情 来 更 改 应 用 的 状态 (它们 只 是 返回 对 和 象 )。 想 让 action 
创建 器 生效 ， 需 要 使 用 Redux 提供 的 dispatcher。di spatch 函数 由 Redux store 本 身 提供 ， 它 是 
将 action 发 送 给 Redux 进行 处 理 的 方法 。 接 下 来 将 设置 Redux store 以 便 能 够 使 用 它 的 dispatch 
吨 数 来 处 理 action。 

在 设置 store 之 前 ， 还 需要 创建 一 个 根 reducer 文件 ， 它 允许 开发 人 员 创建 一 个 有 效 的 store， 
在 之 后 回 过 头 来 将 其 构建 出 来 之 前 ,这 个 reducer 不 会 做 任何 事情 。 在 src 中 创建 一 个 名 为 reducers 
的 文件 夹 ， 并 在 其 中 创建 一 个 名 为 rootjs 的 文件 ， 在 这 个 文件 中 ， 使 用 Redux 提供 的 
combineReducers 国 数 来 设置 之 后 的 reducer 的 去 处 。 combineReducers 困 数 的 功能 和 它 字 
面 上 的 意思 完全 一 样 : 将 多 个 reducer 合并 成 一 个 。 

如 果 没 有 合并 reducer 的 能 力 ， 开 发 者 将 会 遇 到 多 个 reducer 之 间 冲 突 的 问题 而 且 必 须 找到 合 
并 reducer 和 路 由 action 的 方法 。 这 是 Redux 显而易见 的 好 处 。 虽 然 将 所 有 东西 设置 好 还 有 一 些 
工作 要 做 , 但 是 一 旦 完成 这 些 工作 ，Redux 就 可 以 更 容易 地 扩展 应 用 的 状态 管理 。 代 码 清单 10-4 
展示 了 如 何 创建 根 reducer 文件 。 
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代码 清单 10-4 创建 根 reducer ( src/reducers/roots.js ) 


从 Redux 导入 combineReducers 


import { combineReducers } from ‘'redux'; 


const rootReducer = combineReducers ({});，; Re 
export default rootReducer; 夺 目前 使 用 combineReducers 和 
| 导出 根 空 对 象 来 创建 根 reducer 
reducer 


现在 已 经 为 Redux 设置 了 一 个 reducer， 接 下 来 将 设置 store。 创 建 一 个 名 为 store 的 文件 夹 ， 并 
在 其 中 创建 一 些 文件 : store/configureStore.js 、store/configureStore.prod.js 、store/configureStore.dev.js 
和 store/exampleUse.js。 这 些 文件 负责 导出 创建 store 的 果 数 并 在 开发 模式 下 集成 开发 者 工具 。 代 
码 清 单 10-5 展示 了 所 创建 的 store 相关 的 文件 。 这 里 为 每 个 环境 使 用 了 不 同 的 文件 ， 因 为 开发 环 
境 和 生产 环境 可 能 会 包含 不 同 的 中 间 件 和 库 。 这 只 是 一 个 惯例 一 一 Redux 并 没有 要 求 开 发 者 将 也 
数 放 在 多 个 或 一 个 文件 中 。 


代码 清单 10-5 ”创建 Redux store 


// src/store/configureStore.js 





1mBort {~ PRODUCTION  } frem "énvirons"? 这 个 文件 让 在 应 用 中 
import prodStore from './configqureStore.prod'; 使 用 store 更 为 容易 ， 
import devStore from './configureStore.dev',; 而 不 必 关 心 是 开发 环 
export default PRODUCTION ? prodStore * devStore; 境 还 是 生产 环境 

// src/store/configureStore.prod.js 

import { ereateStore } from ‘redux’: 

import rootReducer from '../reducers/root'; 


let store; 
export default function configureStore (InitialState) 
if (store) 1 


return store; 使 用 Redux 的 createStore 
} 方法 来 创建 store 
1Nit1id1l98tate)? 


store = createStore (rootReducer, 
return store,; 


} 


将 初始 状态 传递 给 配 
置 以 供 Redux 使 用 


// src/store/configureStore.dev.js 


import thunk from "redux-thunk'; 从 Redux 中 导入 compose 实用 程 
import { createStore, compose} from ‘redux'; \J 旨 人 
import rootReducer from '../reducers/root'; 序 ， 以 组 合 middleware 


let store,; 
export default initialState =>- { 
i (SEOre) 并 


return store:; 确保 一 直 访 问 同 一 个 store 一 一 这 上段 代 
} 码 用 于 确保 男 一 个 文件 访问 已 创建 的 
Const createdStore = CreateStore ( store 时 会 返回 同一 个 store 
rootReducer, 


主人 人 
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compose (window.devToolsExtension ()) 了 
Se ™ 


i 展 ， 这 段 代 码 会 将 其 集成 进来 


store = createdStore:; 
return store; 


> 


现在 已 经 设置 好 了 一 个 可 以 使 用 的 store, 可 以 尝试 派发 一 些 action 并 来 看 看 它们 是 如 何 工 作 
的 。 不 久之 后 ， 我 们 将 把 Redux 集成 到 React 中 ,但 请 记 住 ，Redux 并 不 是 一 定 要 与 React 或 其 
他 任何 库 或 者 框架 一 起 用 ,但 有 不 少 开 源 项 目 将 Redux 与 Angular、Vue 等 框架 集成 在 一 起 。 

Redux store 提供 了 几 个 在 使 用 Redux 的 整个 过 程 中 会 持续 使 用 的 重要 方法 一 一 getState 
和 dispatch。getState 用 于 获取 给 定时 间 点 的 Redux store 状态 的 快照 ，dispatch 则 是 将 
action 发 送 到 Redux store 的 方式 。 在 调用 dispatch 方法 时 , 传人 一 个 action, 该 action 是 调用 action 
创建 右 的 结果 。 由 于 使 用 store .dispatch() 是 在 Redux 中 触发 状态 更 改 的 唯一 方法 , 因此 会 
在 很 多 地 方 用 到 它 。 接 下 来 ,将 尝试 使 用 之 前 设置 的 “加 载 ”action 创建 器 ， 让 store 来 派发 一 些 
action。 代 码 清 单 10-6 展示 了 如何 使 用 临时 文件 (src/store/exampleUse.js ) 派发 一 些 action。 此 文 
件 仅 用 于 演示 ， 主 应 用 工作 并 不 需要 它 。 








代码 清单 10-6 ”派发 action ( src/store/exampleUse.js) 
人 SON.gUrestore fr "ss /eort igurestore } 导入 configureStore 方法 
import { loading, loaded } from '../actions/loading'; a 
const store = configureStore () ; 并 使 用 它 创建 store 
Console.1o0g('========== Example store ===========");} 
store.dispatch(loading ()); 
store.dispatch(loaded () ) ; 本 a 
store.dispatch (loading()); 派发 为 
store.dispatch (loaded ()); action 
Console.1o0og ("========== end example store =========== 





调用 store 的 dispatch 方法 ,并 将 action 创建 句 的 调用 结果 传递 进 
去 ，action 创建 器 将 返回 action 对 象 供 dispatch 方法 使 用 
要 派发 这 些 action， 只 需要 将 exampleUse 文件 导入 主 应 用 文件 中 ， 当 打开 应 用 时 它 就 会 运行 。 
代码 清单 10-7 展示 了 需要 对 src/index.js 进行 的 小 修改 ,一 旦 将 Redux 与 React 对 接 ,将 通过 React 
组 件 与 Redux 交互 ， 而 不 需要 像 下 面 这 样 出 于 演示 的 目的 来 手动 派发 action。 





代码 清单 10-7 导入 exampleUse 文件 ( src/index.js ) 


import React from "react';} 
import { render } from 'react-dom'; \ 


import { App } from './containers/App'; 

import { Home, SinglePost, Login, NotFound, Profile } from './containers',; 
import { Router, Route } from './components/router'; 

impeort { hlistory } from /history', 

import { firebase } from './backend'; 


10.2 在 Redux 中 创建 action 209 


import configureStore from './store/configureStore'; 
import initialReduxState from './constants/initialSstate'; 


import "./store/exampleUVyse'? 4 可 人 这 个 store 文件 , 以 
ss 便 在 打开 应 用 时 运行 


如 果 在 开发 模式 下 加 载 应 用 (使 用 npm run dev )， 应 该 会 看 到 Redux 开发 者 工具 的 图 标 
变 为 启用 状态 。 当 应 用 运行 时 ， 被 导入 的 文件 将 运行 并 多 次 调用 store 的 dispatcher， 将 action 发 
送 到 store。 目 前 还 没有 为 action 设置 任何 处 理 程 序 (通过 reducer )， 也 没有 将 任何 东西 挂 接 到 
React 上 ， 因 此 不 会 有 任何 有 意义 的 变化 。 但 如 果 打 开 开 发 者 工具 并 查看 action 历史 ， 应 该 会 看 
到 ， 每 个 “加 载 ”action 都 已 经 被 派发 并 记录 下 来 。 图 10-5 展示 了 该 上 下 文中 的 action 派发 图 以 及 
在 Redux 开发 者 工具 中 应 该 看 到 的 结果 。 


<<————— {type: loading} 


store =<—— {type: loaded } 


-一 {type:loading} 
发 送 到 dispatcher 的 action 


i action 被 创建 


Inspector Letters Social | React In Action by Mark Thomas 


oo) OS of 了 人 St 


W@INIT 
letters-social/app/loading 
letters-social/app/loaded 
letters-social/app/Loading 


letters-social/anp/TLoaded 
| 





@ Pause 


图 10-5” 当 运行 应 用 时 ， 我 们 创建 的 示例 store 将 接收 action 创建 器 的 结果 并 将 这 些 结果 发 送 到 store。 
目前 还 没有 设置 任何 reducer 来 做 任何 事情 ， 所 以 什么 也 不 会 发 生 。 一 旦 设置 了 reducer， 
Redux 将 根据 所 派发 的 action 类 型 来 决定 对 状态 进行 哪些 更 改 
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10.2.4 异步 action 和 中 间 件 


我 们 已 经 可 以 派发 action 了 , 但 目前 它们 还 是 同步 的 。 很 多 情况 下 开发 者 会 布 望 基于 异步 的 
action 对 应 用 进行 更 改 ， 可 能 是 一 个 网 络 请 求 、 从 浏览 需 读 取 一 个 值 〈《 通 过 本 地 存储 角 、cookie 
存储 等 )、 处 理 WebSocket 或 其 他 的 异步 操作 。Redux 不 支持 开 箱 即 用 的 异步 action， 因 为 它 期 望 
action 只 是 对 象 ( 而 不 是 Promise 或 其 他 任何 东西 ), 但 我 们 可 以 通过 集成 一 个 已 安装 的 库 来 启用 
它 ， 这 个 库 就 是 redux-thunk。 

redux-thunk 是 Redux 的 一 个 中 间 件 库 ， 这 意味 着 它 以 一 种 “途经 ”或 “传递 ”的 方式 在 
Redux 中 起 作用 。 你 可 能 使 用 过 其 他 应 用 这 个 概念 的 API， 如 Express 或 Koa( Node.js 的 服务 条 
端 框架 )。 中 间 件 的 工作 方式 是 让 开发 者 以 一 种 可 组 合 的 方式 介入 到 某 个 周期 或 流程 中 ， 这 意味 
着 可 以 在 单个 项 目 中 创建 和 使 用 相互 独立 的 多 个 中 间 件 水 数 。 

用 Redux 文档 的 话说 ，Redux 中 间 件 是 “从 发 送 action 到 action 到 达 reducer 之 间 的 第 三 方 扩 
展 点 ”。 这 意味 着 在 reducer 处 理 一 个 action 之 前 ,开发 者 有 机 会 对 该 action 进行 操作 或 修改 。 接 下 
来 将 使 用 Redux 的 中 间 件 创建 错误 处 理 程 序 ， 但 目前 要 用 redux-thunk 中 间 件 在 应 用 中 启用 异 
步 action 创建 。 代 码 清单 10-8 展示 了 如 何 将 redux-thunk 集成 到 应 用 中 。 需 要 注意 的 是 要 将 中 
间 件 同时 添加 到 生产 环境 和 开发 环境 的 store 中 ( configureStore.prod.js 和 configureStore.dev.js )。 请 
记 住 ， 可 以 选择 最 适合 自己 情况 的 生产 和 开发 store 的 设置 ， 我 在 这 里 只 将 它们 分 为 两 个 ， 以 便 明 
确 在 不 同 环境 下 使 用 哪 一 个 。 


代码 清单 10-8 通过 redux-thunk 启用 异步 action 创建 器 





import thunk from "vedux-thunk"; 
import { createStore, compose, applyMiddleware } from 'redux'; 


import rootReducer from '../reducers/root'; 
let store; 为 了 将 中 间 件 集成 到 Redux store 中 ， 
expOrt default (initialSstate) => 1 导入 applyMiddleware 实用 程序 


LE (StOre) 4 
return store; 
} 
const createdStore = createStore (rootReducer, initialState, composel( 
applyMiddleware!l 
tarik; 
j 
window.devToolsExtension() 
) 在 Redux 中 使 用 applyMiddleware 方法 插 
); 入 和 排列 中 间 件 一 一 这 里 将 redux-thunk 


store = createdSsStore; 
J 旧 
return store; 中 间 件 插入 store 中 


} 7 


安装 了 redux-thunk 中 间 件 之 后 ， 就 可 以 创建 异步 action 创建 锅 了 。 为 什么 我 说 的 是 异步 
action 创建 器 而 不 是 异步 action? 因为 即使 在 做 异步 的 事情 〈 如 进行 网 络 请 求 )， 你 创建 的 action 
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也 不 是 异步 任务 本 身 。 相 反 ， 当 一 个 Promise 到 来 的 时 候 ，redux-thunk 让 Redux store 知道 如 
何 处 理 一 个 Promise。 这 个 Promise 的 过 程 就 是 开发 者 回 store 派发 action 的 方式 。Redux 并 没有 
真正 改变 什么 , 这些 action 仍然 是 同步 的 , 但 是 Redux 现在 知道 在 将 Promise 传递 给 dispatch 
方法 时 ， 需 要 等 待 着 Promiser 去 解析 。 

在 前 面 几 章 中 ,我 们 创建 了 一 些 使 用 isomorphic-fetch 库 从 API 获取 文章 的 逻辑 并 使 
用 React 展示 它们 。 执 行 这 样 的 异步 操作 通常 需要 派发 多 个 action (通常 是 “加 载 中 ”“ 成 功 ” 和 
“失败 ”的 action )。 例 如， 希望 用 户 上 传 文件 到 服务 器， 服务 器 在 上 传 期 间 发 回 进 度数 据 。 将 这 
一 过 程 的 不 同 部 分 映射 到 action 的 一 种 方式 是 ， 创 建 一 个 表示 上 传 开 始 的 action、 一 个 告知 应 用 
其 他 部 分 当前 有 东西 正在 加 载 的 action 、 一 个 表示 从 服务 器 发 回 的 进度 更 新 的 action、 一 个 表示 
上 传 结 束 的 action 和 一 个 处 理 错误 的 action。 

redux-thunk 通过 包装 store 的 dispatch 方法 来 工作 ， 这 样 它 就 可 以 处 理 派 发 普通 对 象 
以 外 的 东西 (如 Promise， 一 个 处 理 异 步 流 的 API )。 随 着 Promise 被 执行 ， 中 间 件 将 异步 派发 创 
建 的 action (例如 ， 在 请 求 的 开始 和 结束 时 )， 并 让 开发 者 适当 地 处 理 这 些 更 改 。 如 前 所 述 ， 这 
里 的 关键 区 别 在 于 action 本 身 仍 然 是 同步 的 ， 但 当 它 们 被 派发 并 发 送 到 reducer 时 ， 它 们 是 异步 
的 。 图 10-6 展示 了 这 一 过 程 。 







| 
1 
dispatch WB 开始 ， Promise 


如 HTTP 


dispatch| A ] 结束 请求 
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1 | 
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| re , i WT 
“Jy 1 dt EE 3 人 上 
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图 10-6 ”redux-thunk 这 样 的 中 间 件 库 支 持 异步 action 创建 器 ， 它 允许 开发 者 除 action 之 外 还 可 以 派发 诸 
如 Promise ( 一 个 完成 异步 工作 的 方法 ， 是 JavaScript 规范 的 一 部 分 ) 之 类 的 内 容 。 它 会 解析 Promise 并 
允许 开发 者 在 Promise 的 生命 周期 的 不 同时 间 点 ( 执行 前 、 完 成 、 出 错 等 ) 派发 action 


接 下 来 将 根据 我 们 对 异步 action 创建 器 的 了 解 来 编写 一 些 处 理 帖 子 获取 和 帖子 创建 的 action 创 
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建 器 。 因 为 redux-thunk 包装 了 store 的 dispatch 方法 ， 所 以 可 以 从 action 创建 锅 中 返回 一 个 明 
数 ， 该 函数 接收 dispatch 方法 作为 函数 ， 人 允许 开发 者 在 一 个 Promise 的 执行 过 程 中 派发 多 个 
action。 代 码 清单 10-9 展示 了 这 类 action 创建 器 的 样子 。 我 们 将 创建 几 个 异步 action 创建 融和 一 个 
同步 action 创建 器 ,我 们 先 创建 一 些 action, 用 于 人 处理 帖 子 和 评论 的 用 户 交 互 。 先 是 一 个 error action， 
如 果 出 现 问 题 , 将 使 用 它 来 显示 用 户 错误 信息 。 在 更 大 型 的 应 用 中 , 可 能 需要 创建 不 止 一 种 方式 来 
处 理 错 误 , 但 对 我 们 而 言 ， 这 应 该 足够 了 。 我 们 可 以 在 这 里 使 用 这 个 error action， 也 可 以 在 任何 组 
件 的 错误 边界 中 使 用 这 个 error action。componentDidCatch 将 提供 可 以 派发 到 store 的 错误 信息 。 





代码 清单 10-9 创建 error action ( src/actions/error.js ) 


import * as types from ',../constants/types"; ep , 
export function createError(error, info) { 这 个 action 创建 希 是 参数 化 的 一 一 开 
return { 发 者 期 望 将 错误 信息 发 送 到 store 
ns 这 个 action 拥有 通用 的 应 用 错误 类 型 一 在 
info \ 传递 实际 错误 更 大 型 的 应 用 中 将 会 有 很 多 种 错误 类 型 
}; 和 信息 


} 


现在 有 了 处 理 错误 的 方式 ， 可 以 开始 编写 一 些 异 步 action 创建 右 了 。 我 们 将 从 评论 开始 ， 然 
后 再 到 帖子 。 帖 子 和 评论 的 action 总 体 上 应 该 是 相似 的 , 但 每 组 action 的 工作 方式 仍 有 一 些 细微 
的 差别 。 我 们 而 望 能 够 做 一 些 与 评论 相关 的 事情 ， 如 显示 和 隐藏 、 加 载 以 及 为 指定 的 文 草创 建新 
评论 。 代 码 清单 10-10 展示 了 将 要 创建 的 评论 action。 





代码 清单 10-10 创建 评论 action ( src/actions/comments.js ) 


import, * as types from '.. /constants/types'; 
import * as API from '../shared/http'; 导 和 人 API 辅 - 
imDoOrt { GreateBrror } from /error"y 助 困 数 
export function showComments (postId) { 
创建 参数 化 的 action 创建 器 ， 以 
return { 
type: 七 YPes .COmments .SHOW， 便 可 以 显示 特定 的 评论 部 分 
postId 
}; 
} 
We toggleComments (PostIQ) { | 切换 评论 的 功能 
type: types.comments.TOGGLE, 
postId 


}? 


| 创建 获取 评论 的 功能 一 
export function updateAvailableComments (comments) \ 此 文件 中 的 异步 action 创建 


return 1 带 将 使 用 这 个 函数 
type: types.comments,.GET; 
comments 
}; 从 给 定 人 荷载 中 创建 评论 , 返回 
} 一 个 男 数 而 不 是 普通 对 象 
export function createComment (payload) { 


10.2 在 Redux 中 创建 action 213 


return dispatch => 1 
return API.createComment (payload) 


Fetch API 实现 了 诸如 json0 和 blob() 


™ A . 大 Ny 
.then(res => ies.json() ) 这 样 的 基于 Promise 的 方法 
.then (comment => { 
dispatch < 一 
ER 使 用 从 服务 器 获得 的 评论 的 JSON 
type: types.comments.CREATE, 2 es | 
comment \ 来 派发 创建 评论 的 action 
:hh 
}) 如 果 收 到 一 个 错误 ， 则 使 
.Catch (erzr => dispatch (createError (err))); 用 createError action 来 将 
}; 其 发 送 给 store 
} 年 » 
export function getCommentsForPost (post1Id) { 获取 指定 帖子 的 评论 并 使 用 
return dispateh => 1 updateAvailableComments action 
return API.fetchCommentsForPost (postId) 
如 果 有 的 话 ， .then(res 三 > tt eat ) | 
处 理 错误 .then (comments => dispatch (updateAvailableComments (CommentsS ) ) ) 
AR .Catch (err => dispatch (createError (err))); 


} 


随 着 创建 完 这 些 action 和 其 他 action， 将 继续 使 用 ijsomorphic-fetch 库 来 执行 网 络 请 求 ， 
而 isomorphic-fetch 库 遵循 的 Fetch API 在 浏览 器 中 正 变 得 更 为 标准 ， 而 且 现 在 已 经 是 执行 网 
络 请 求 的 事实 上 的 方式 了 。 如 果 可 能 的 话 ， 建 议 你 继续 使 用 遵循 相同 规范 的 Web 平台 API 或 库 。 

创建 完 评论 的 action , 现在 可 以 开始 创建 帖子 的 action 了 。 帖子 的 action 与 刚刚 创建 的 action 
类 似 ， 但 会 使 用 一 些 评论 的 action。 能 够 混合 和 搭配 整个 应 用 内 的 不 同 action 是 Redux 能 够 成 为 
良好 的 应 用 架构 的 另 一 个 原因 。 它 提供 了 一 种 结构 化 的 、 可 重复 的 方式 来 利用 action 创建 功能 ， 
然后 在 整个 应 用 内 使 用 该 功能 。 

接 下 来 将 继续 创建 action 并 为 帖子 添加 一 些 功 能 。 前 几 章 创建 了 用 于 获取 和 创建 帖子 的 功 
能 ,现在 将 创建 为 帖子 点 赞 和 踩 帖子 的 功能 。 代 码 清单 10-11 展示 了 与 应 用 中 的 帖子 相关 的 action 
创建 器 。 现 在 将 从 4 个 action 创建 器 开始 ， 然 后 在 代码 清单 10-12 中 探索 更 多 action 创建 右 。 





代码 清单 10-11 同步 和 异步 action 创建 器 ( src/actions/posts.js ) 


import parseLinkHeader from "parse-LiInk-headqer ' ; A 
JSON API 使 用 链接 头 信 
import * as types from '../constants/tyYPes ' ; 息 来 表示 分 页 选项 
import.* as API from '../shared/http'; 
import { createError } from './error';} 
import { getCommentsForPost } from './comments'; 
就 像 对 评论 所 做 的 那样 ， 
export function updateAvailablePosts(posts) { 这 个 action 创建 器 将 把 新 
retwen 4 
AA. 从 
type: typeées'.posts.GET, 评论 起 传 给 ei 
posts 
}; 
。 相应 地 更 新 store 中 的 分 页 链接 
export function updatePaginationLinks (links) { 
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return { 
type: types.posts.UPDATE LINKS, 
links 
}; 
} 使 用 ID 来 为 特定 帖子 点 赞 
export function like(postId) { 
return (dispatch, getState) => { Ph | 
wa war Fw eb (i Redux 会 将 dispatch 和 getState 
return API.likePost (postId, user.19) 方法 注入 这 个 返回 的 函数 中 
.then(res => res.json()) 
.then(post => { 
re ee ye 派发 LIKE action 并 将 帖子 作 
e : es .Posts . 
iia 为 元 数据 附加 在 其 上 
post 
}); 
}) 
.Catch (err => dispatch (createError (err))); 


}; 
} 
export function unlike(postId) { 


return (dispatch, getState) => { 踩 帖 子 涉及 相同 的 流程 ， 只 是 
const { user } = getstate(); 派发 不 同 的 action 类 型 
return API.unlikePost (PostId，user .1d) 

.then (res => res.json()) 
.七 nen (Post => { 
dispatceh(t 
type: types.posts.UNLIKE, 
post 
} ) ; 
} ) 


.Catch (er => dispatch (createError (err))); 
}; 
} 


我 们 需要 为 帖子 创建 更 多 action 类 型 。 现 在 已 经 可 以 给 帖子 点 赞 或 踩 帖子 ,但 仍然 没有 移植 
之 前 创建 的 发 帖 功能 ， 而 且 还 需要 获取 多 个 和 单个 帖子 的 功能 。 代 码 清单 10-12 展示 了 相应 的 需 
要 创建 的 action 创建 器 。 


代码 清单 10-12 ”创建 更 多 的 帖子 action 创建 器 ( src/actions/posts.js ) 





A 
export function createNewPost (post) |{ 
return (dispatch, getState) => 1 就 像 之 前 一 样 ， 使 用 getState 
const { user } = getState(); 方法 来 访问 状态 快照 
Post .userId = user.id; 
return API.createPost (post) 在 新 帖子 中 嵌入 用 户 ID 
.七 nen (es => res.json()) 


.then (newPost => { 
dispatch(t{ 
type: types.posts.CREATE, | 派发 创建 帖子 的 action 
Bost: newPost 
})» 
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} ) 


.Catch (err => dispatch (createError (err))); 


i 


export function getPostsForPage (page = ‘'first') | 
return (dispatch, getState) => { | 抓 取 分 页 状态 对 象 
const { pagination 和 = GetState () ; 


const endpoint = paginationlpagel]; 
return API.fetchPosts (endpoint) 
.then(res => 1 


使 用 链接 头 const links = parseLinkHeader (res.headers.get ('Link"')); 
return res.json() .then(posts => { 
解析 器 并 传 


dispatch (updatePaginationLinks (links)); RR 2 
入 链接 头 dispatch (updateAvailablePosts (Posts) ) ; :0 派发 链接 action 
看 这 
}) 让 二 
.Catch (err => dispatch (createError (err)));} 派发 更 新 帖子 的 
}; action 


} 
export function loadPost (postId) { 
return dispatch => 1 


return API.fetchPost (postId) 从 API 加 载 帖 
.then(res => res.json()) 子 并 获取 它 的 
.then(post => { 相关 评论 


dispatch (updateAvailablePosts([post])); 
dispatch (getCommentsForPost (PostIQ) ) ; 
} 3 


.Catch (err => dispatch (createError (err))); 


} 


希望 现在 你 已 经 开始 掌握 异步 action 创建 句 的 诀 宅 了 。 在 许多 应 用 中 ,这 类 action 创建 器 非 
党 第 见 。 但 可 能 性 还 不 止 于 此 。 我 发 现 , 使 用 redux-thunk 本 和 号 就 足以 满足 大 多 数 需 要 异步 创 
建 action 的 应 用 ,但 人 们 已 经 创建 了 许多 其 他 库 来 满足 这 一 需要 。 


10.2.5 ”要 不 要 使 用 Redux 


完成 了 这 些 action 创建 器 之 后 ， 就 已 经 做 好 了 用 于 创建 帖子 和 评论 的 初始 功能 。 但 仍旧 缺少 
一 个 方面 : 用 户 身 份 验证 。 前 几 章 使 用 Firebase 的 辅助 方法 来 检查 用 户 的 身份 验证 状态 并 使 用 该 
状态 更 新 本 地 组 件 状 态 。 是 否 需 要 对 号 份 验证 做 同样 的 事情 呢 ? 这 又 引出 了 另 一 个 值得 讨论 的 问 
题 : 哪些 东西 属于 Redux， 哪 些 不 属于 Redux? 继续 之 前 ， 让 我 们 先 看 看 这 个 有 争议 的 问题 。 

从 “store 里 想 放 什 么 就 放 什 么 ”到 “一 切 都 应 放 到 store 中 ”，React 和 Redux 社区 的 观点 五 
花 八 门 。 只 在 Redux 情境 下 使 用 React 的 工程 师 有 一 种 倾 问 ， 就 是 将 Redux 与 React 一 起 使 用 看 
作 唯 一 的 方法 并 认为 React 和 Redux 是 一 回 事 。 人 们 常常 被 自己 的 经 验 所 限制 , 但 我 希望 在 形成 
固定 的 看 法 之 前 ， 我 们 可 以 花 些 时 间 思 考 事 实 并 权衡 利 痊 。 

首先 ， 必 须 间 记 ， 尺 管 React 和 Redux 非常 契合 ， 但 这 些 技术 本 身 并 没有 内 在 联系 。 构 
建 React 应 用 并 不 需要 Redux, 我 希望 读者 已 经 从 本 书 中 了 解 了 这 一 点 。Redux 只 是 工程 师 可 
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以 使 用 的 另 一 个 工具 而 已 ， 它 不 是 构建 React 应 用 的 唯一 方式 ， 而 且 肯 定 不 会 使 “常规 ”的 
React 概念 ( 如 本 地 组 件 状态 ) 失效 。 在 某 些 情况 下 ， 将 组 件 状 态 引 入 Redux 可 能 只 会 徒 增 
开销 。 

那 该 怎么 办 呢 ? 到 目前 为 止 ，Redux 已 经 被 证 明 是 为 应 用 提供 健壮 架构 的 好 办 法 ， 它 对 更 好 
地 组 织 代码 和 功能 很 有 帮助 (我们 甚至 还 没有 涉及 reducer! )。 根 据 目 前 的 经 验 ， 你 可 能 很 快 就 
会 同意 “一 切 都 应 放 到 store 中 ”的 观点 ， 但 我 想 告 诚 大 家 不 要 冲动 ， 而 是 要 权衡 利弊 。 

根据 我 的 经 验 ， 我 们 可 以 通过 几 个 问题 来 引导 决定 哪些 东西 属于 Redux store， 而 哪些 不 属于 。 

第 一 个 问题 是 : 应 用 的 很 多 其 他 部 分 需要 了 解 该 状态 或 功能 吗 ? 如 果 是 , 那 这 个 状态 或 功能 
应 该 放 人 Redux store 中 。 如 果 状 态 完 全 是 组 件 的 本 地 状态 ， 则 应 该 考虑 将 该 状态 从 Redux store 
中 删除 。 例 如 下 拉 沫 单 ， 它 不 需要 被 用 户 之 外 的 东西 控制 。 如 果 应 用 需要 控制 下 拉 沫 单 是 打开 还 
是 关闭 ， 并 需要 对 它 的 打开 或 关闭 做 出 啊 应 ， 那 么 这 些 状态 的 改变 应 该 通过 store 进行 。 但 如 果 
不 是 ， 那 么 将 状态 保持 在 组 件 本 地 就 好 了 。 

男 一 个 问题 是 正在 处 理 的 状态 是 否 会 被 Redux 简化 或 更 好 地 表示 。 如果 只 是 为 了 使 用 Redux 
而 将 组 件 的 状态 和 行为 转换 到 Redux 中 , 那 这 样 做 可 能 只 会 引入 额外 的 复杂 度 , 却 并 不 能 从 中 得 
到 什么 好 处 。 但 是 ,如 果 状 态 非 常 复杂 或 特殊 ， 而 Redux 却 可 以 使 其 更 容易 使 用 ， 那 就 应 该 将 该 
状态 纳入 store 中 。 

市 着 这 些 问 题 , 让 我 们 重新 考虑 是 否 应 该 将 用 户 和 号 份 验证 逻辑 集成 到 Redux 中 。 应 用 的 其 
他 部 分 需要 了 解 用 户 吗 ? 当然 需要 。 能 更 好 地 用 Redux 来 表达 用 户 逻 辑 吗 ”如果 不 将 用 户 和 身份 
验证 逻辑 集中 到 store 中 ， 可 能 就 需要 在 应 用 的 不 同 页 面 之 间 重 复 这 些 逻 辑 ， 这 就 不 太 理想 了 。 
目前 看 来 ， 将 用 户 和 吴 份 验证 逻辑 集成 到 Redux 中 是 有 意义 的 。 

来 看 看 如 何 创 建 这 些 action 吧 ! 代码 清单 10-13 展示 了 将 要 创建 的 与 用 户 相 关 的 action。 这 
些 示例 中 将 使 用 async/await 这 个 JavaScript 语言 的 现代 特性 。 如果 不 熟 悉 这 部 分 语言 的 工作 
原理 ,那么 通读 Mozilla Developer Network 的 文档 以 及 Axel Rauschmayer 博士 的 Exploring ES2016 
and ES2017 可 能 会 有 所 帮助 。 





代码 清单 10-13 ”创建 用 户 相 关 的 action ( src/actions/auth.js ) 


import * as types from '‘'../constants/types'; 
JE 4 listory 上 £rom ohdiskoz 7 
Import { createError } from './error'; 


import { loading, loaded } from './loading'; 
import { getFirebaseUser, loginWithGithub, logUserOut, getFirebaseToken |} 


from '../backend/auth'; 

export function loginSuccess (user, token) 1{ 创建 登录 和 合 导入 与 验证 相 

return { \ 关 的 action 所 
type: types.auth.LOGIN SUCCESS, 出 action 创建 需 的 模块 
USser， 大 ， 登 录 action 
token 将 被 参数 化 以 

后 接受 user 和 

token 


export function logoutSuccess() 1{ 
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下 忆 巧 南天 4 
type: types.auth.LOGOUT _ SUCCESS 


}; 
} 


export function logout() { 使 用 Firebase 
return dispatceh => 4 登 出 用 户 
return logUserOut() 、 i 
.then(() => 1{ 


history.push(" /login"); 
dispatch(logoutSuccess () ) :; 
window.Raven.setUserContext () ; 


将 用 户 推 到 登录 页 面 ， 派 发 登 出 action， 
并 清理 用 户 上 下 文 (用 于 错误 跟踪 的 库 ) 





}) 
.Catch (er => dispatch (createError (err))); 


js 使 用 Firebase 
} 登录 用 户 
expDoOrt LUNGtiOr L691in() 4 
ee ane 由 网 es async/await 使 用 try/catch 的 
return loginwi 工 臣 na .then (async => sega 
ee 错误 处 理 语法 
| 
dispatch (loadingd ()}}? 
const user = await getFirebaseUser () ; 使 用 await 从 Firebase 
尝试 找到 从 Firebase 的 | “const token = await getFirebaseToken (),; 中 获取 user 和 token 
API 返回 的 用 户 , 如 果 人 (user.uid); 
Ffs » B Ee 
它们 不 存在 《404 ), 内 Const userPayload = { 
须 使 用 Firebase 的 信息 name: user.displayName, 
为 其 注册 ProfilePicture: user.photoURL, 


Gy 已 Se ,iQ 


}? 


const newUser = await API.createUser (userPayload) .then (zes 


创建 新 用 户 
=> res.Jjson()); 

dispatch (loginSuccess (newUser, token)); 使 用 新 用 户 派 
dispatch (lo0aded () ) ; , ; 
history. push( 7 发 登录 wb 
return newUser,; 并 从 靖 数 返回 

} 

const existingUser = await res.]Jjson(); 如 果 用 户 已 存在 ， 派 

dispatch (loginSuccess (existingUser, token) ) ， _ 

dispatch (loaded () ) ; 发 相应 的 登录 action 

并 返回 


Nistory, Dusn( 7 T): 
return existingUser; 
} cateh (erzr) 1 


CreateError (err);，: 
捕获 登录 过 程 中 的 错误 
并 将 错误 派发 给 store 


这 样 就 已 经 为 用 户 相 关 的 操作 、 评论 、 帖 子 、 加 载 和 错误 创建 了 action。 虽然 这 看 起 来 很 多 ， 
但 是 让 人 高 兴 的 是 我 们 所 做 的 已 经 创建 了 应 用 的 大 部 分 原始 功能 。 下 一 节 ， 我 们 仍然 需要 教 
Redux 如 何 使 用 reducer 啊 应 状态 更 改 ， 然 后 将 所 有 东西 连接 到 React， 但 这 些 重新 创建 的 action 
代表 了 我 们 (或 用 户 ) 可 以 与 应 用 交互 的 所 有 基本 方式 。 这 是 Redux 的 男 一 个 优点 : 开发 者 最 终 
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要 做 的 工作 是 将 功能 转换 为 action, 但 最 后 会 得 到 一 个 相当 全 面 的 用 户 可 以 在 应 用 中 执行 的 操作 
的 集合 。 这 比 充斥 着 大 量 意大利 面条 代码 的 代码 库 要 清晰 得 多 , 这 些 代码 库 往往 无 法 获得 准确 方 
法 来 搞 清 应 用 ， 更 不 用 说 采取 不 同 的 行动 了 。 


10.2.6 ”测试 action 


接 下 来 , 在 继续 介绍 reducer 之 前 , 我 们 将 为 这 些 action 编写 一 些 快速 测试 。 方便 起 见 ， 
我 不 打算 为 创建 的 每 个 reducer 或 action 编写 测试 , 我 只 提供 一 些 代表 性 的 示例 ， 以 便 读者 
了 解 如 何 测试 Redux 应 用 的 不 同 部 分 。 如 果 想 查看 更 多 示例 , 可 以 在 应 用 源 代 码 中 查看 test 
目录 。 

Redux 使 测试 action 创建 器 、reducer 和 Redux 架构 的 其 他 部 分 变 得 简单 上 且 直 接 。 更 好 的 是 ， 
它们 可 以 独立 于 前 端 框架 进行 测试 和 维护 。 这 在 大 型 应 用 中 尤其 重要 , 因为 测试 在 这 些 应 用 ( 商业 
应 用 而 不 是 周末 的 业余 项 目 ) 中 是 一 项 重要 的 工作 。 对 于 action， 通 常 的 想法 是 断言 预期 的 action 
类 型 ， 任 何必 要 的 蓓 载 信 息 都 基于 给 定 的 action 进行 了 创建 。 

大 多 数 action 创建 器 都 可 以 很 容易 地 进行 测试 , 因为 它们 通常 返回 的 是 带 有 类 型 和 荷载 信息 
的 对 象 。 虽然 有 时 候 也 需要 做 一 些 额 外 的 设置 来 适应 异步 action 创建 锅 之 类 的 东西 。 要 测试 异步 
action 创建 器 ， 需 要 使 用 本 章 开 头 安装 的 模拟 的 store ( redux-mock-store ) 并 使 用 
redux-thunk 来 配置 它 。 这 样 ， 我 们 就 可 以 断言 异步 action 创建 右派 发 了 某 种 action， 并 验证 
它 是 否 按 预 期 工作 。 代 码 清单 10-14 展示 了 如 何在 Redux 中 测试 action。 





代码 清单 10-14 在 Redux 中 测试 action ( src/actions/comments.test.js ) 


二 STOCK .o/sre/shared/http" )» 


import configureStore from 'redux-mock-store'; 使 用 Jest 来 模拟 
import thunk from '‘'redux-thunk'; HTTP 文件 从 而 
import initialState from "../.。../Srec/constants/initialSstate'; 人 饮 于 发 起 网 络 
mmort * as 七 YA from .A/Sre/econstants/tyBes’ sy 请 求 
import { 
showComments, 
toggleComments, 导 人 模拟 store 和 redux 中 间 件 ， 这 样 就 
updateAvailableComments, 可 以 创建 模拟 store 来 镜像 原 有 的 store 
createComment, RE 
getCommentsForPost | 导 和 人 需要 测试 的 action 
} from '../../src/actions/comments'; 导入 API, 以 便 可 以 在 其 上 模 
] i ' 要 
import as API from ",../.. /Sre/eshared/http’; A 
const mockStore = configureStore([thunk]); 
describe('login actions', () => { 


“创建 模 拟 store 并 在 每 个 
let store; SA ,i 本 
Websomued Cid .aw 4 测试 之 前 重新 初始 化 它 
store = mockStore (initialState),; 
test('showComments', () => 1{ 
GoOnst Podtlid = 2 
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const actual = ShowComments (PostIQ) ， 
const expected = { type: types .COmments .SHOWNW， postId }; 
expect (actual) .toEqual (expected); 

} 


test('toggleComments', () =>. { 断言 action 创建 句 将 输出 具有 
const postLa = “二 和 7 》 正确 类 型 和 数据 的 action 
Const actual = toggleComments (postId) ; 


const expected = { type: types.comments .TOGGLE，ipostIQ }; 
expect (actual) .toEqual (expected);} 
二 
test('updateAvailableComments', () => 1 
const comments = ['comments']; 
const actual = updateAvailableComments (comments); 
Const expected = { type: types.comments.GET, comments }; 
expect (actual) .toEqual (expected),; 
a async () => 1 | NN 
Const, mockComment = { Gontent: ‘gréeéat Bost! }; 递 给 action 创建 各 
API .createComment Jest.fn(() => { 
return Promise.resolve lt 使 用 Jest 模拟 来 自 API 


Json: () => Promise.resolve( [mockComment]) 模块 的 createComment 
2 方法 
Fy 派发 action 并 使 用 await 等 待 Promise ni 
await store.dispatch (createComment (mockComment) ) ; 
const actions = store.getActions () ， 
const expectedActions = [{ type: types.comments.CREATE, comment: 


[ImockComment] }]; 瞩 言 a 按 
expect (actions) .toEqual (expectedActions); 
有 预期 创建 
test('getCommentsForPost', async () => 1 
CoONnst pOStId, = "d's 
GONnst Coments = [4 Gontent: great Stuff’" }]» 
API.fetchCommentsForPost = JjJest.fn(() => 1 
return Promise.resolvelt{ 
json: () => Promise.resolve (comments) 
})} 
}); 
await store.dispatch (getCommentsForPost (post1d)); 
const actions = store.getActions () ， 
const expectedActions = [{ type: types.comments .GET， comments }]; 
expect (actions) .toEqual (expectedActions),;} 


} ) 2 


10.2.7 ”创建 用 于 毅 溃 报告 的 自 定义 Redux 中 间 件 


现在 已 经 创建 了 一 些 action， 但 在 继续 介绍 reducer 之 前 ， 还 可 以 添加 一 些 自己 的 中 间 件 。 
中 间 件 是 Redux 人 允许 开发 者 连接 到 数据 流 过 程 中 的 一 种 方式 〈action 被 派发 到 store， 经 由 reducer 
处 理 ， 更 新 状态 ， 通 知 监听 需 )。 Redux 的 中 间 件 方法 类 似 于 Express 或 Koa ( Node.js 的 Web 服 
务 需 框架 ) 等 工具 ， 只 是 它 解决 的 问题 有 所 不 同 。 图 10-7 展示 了 一 个 以 中 间 件 为 中 心 的 流 的 示 
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其 他 服务 


中 间 件 


例 ， 它 可 能 出 现在 Express 或 Koa 之 类 的 框架 中 。 






中 间 件 







添加 、 删 除 、 
修改 数据 





流程 开始 执行 副作用 流程 结束 


副作用 
10-7 ”中 间 件 位 于 流程 的 起 点 和 终点 之 间 并 人 允许 使 用 者 在 这 之 间 做 各 种 事情 


有 时 开发 者 可 能 布 望 中 断 流 、 将 数据 发 送 到 另 一 个 API， 或 者 解决 应 用 的 一 些 其 他 问题 。 
图 10-7 展示 了 一 些 中 间 件 的 不 同 用 法 : 数据 修改 、 流 中 断 和 执行 副作用 。 这 里 的 一 个 关键 点 是 
中 间 件 应 该 是 可 组 合 的 一 一 开发 者 应 该 能 够 对 其 中 任何 一 个 进行 重新 排序 而 不 必 担 心 它们 会 
相互 影响 。 

Redux 的 中 间 件 允许 开发 者 在 派发 action 和 action 到 达 reducer 之 间 做 操作 (参见 图 10-7 的 
“中 间 件 ”部 分 ) 这 是 一 个 关注 Redux 应 用 所 有 部 分 的 共同 问题 的 好 地 方 , 否则 很 多 地 方 需要 重 
复 的 代码 。 


练习 10-1 定义 了 ER 
将 术语 与 其 定义 相 匹 配 . : 
A. Store 
B. reducer 
人 Action 
Db. Action 创建 器 ey 
”Redux 的 中 心 状态 对 象 ， 真相 之 源 。 
_ 和 包含 与 更 改 相关 的 信息 的 对 象 。 它们 必须 有 一个 类 型 并 且 可 以 包含 用 于 传达 事情 发 生 的 任何 
外 的 信息 。 
_ “Redux 用 来 根据 发 生 的 事情 计算 状态 变化 的 函数 。 
用 于 创建 关于 应 用 中 所 发 生 的 事情 的 类 型 和 荷载 信息 的 疯 数 。 \ / 
例如 ， 使 用 中 间 件 是 集中 处 理 错误 、 将 分 析 数 据 发 送 到 第 三 方 API、 记 录 日 志 等 的 好 方法 。 
我 们 将 实现 一 个 简单 的 月 演 报 告 中 间 件 , 该 中 间 件 可 以 确保 任何 未 处 理 的 异常 都 报告 给 错误 跟踪 
和 管理 系统 。 我 使 用 的 是 Sentry， 这 是 一 款 用 于 跟踪 和 记录 异常 以 便 以 后 进行 分 析 的 应 用 , 但 可 
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以 选择 使 用 任何 对 开发 者 或 团队 最 合适 的 工具 ( Bugsnag 是 男 一 个 不 错 的 选择 )。 代 码 清 单 10-15 
展示 了 如 何 创建 一 些 基 本 的 错误 报告 中 间 件 , 当 Redux 遇 到 错误 时 , 这 些 中 间 件 将 对 错误 进行 日 
志 输 出 并 将 其 发 送 到 Sentry。 通 常 ， 当 应 用 出 现 异 常 时 ， 工 程 师 会 收 到 某 种 类 型 的 通知 (立即 或 
在 仪表 盘 中 )，Sentry 会 记录 这 些 错误 并 告诉 开发 着 蚀 误 发 生 的 时 间 。 





代码 清单 10-15 ”创建 简单 的 月 溃 报 告 Redux 中 间 件 


// ... src/middleware/crash.js 
import { createpbrror } ‘from "ss /aCti0onNns/error!? Redux 的 middleware 是 由 Redux 
export default store => next => action => 1{ 注入 的 复合 函数 组 

入 的 复合 限 数 组 成 的 


if (actiEon error) 4 
console.error (action.error):; 
Console.error (action.info); 


如 采 没 有 错误 ， 则 继 


} 续 下 一 个 action 
return next (action); | 如 果 有 错误 ， 则 报告 它 
} catch (err) 1 
const { user } = store.getState(); 
console.error (err); 获取 用 户 信息 并 将 其 和 错误 一 
window.Raven.setUserContext (user); s GR \ 
起 发 出 ; 发 送 错误 到 store 


window.Raven.captureException (err); 
return store.dispatch (createError (err)); 


本- 


//... src/store/configureStore.prod.js 
import thunk from 'redux-thunk'; 
import { createStore, compose, applyMiddleware } from 'redux'; 
| 
import rootReducer from '../reducers/root'; 用 的 中 间 件 
import crashReporting from '../middleware/crash'; 


let store; 
export default function configureStore(initialState) { 
dE (SEGre) 4 
return Store: 


} 为 生产 环境 添 

store = createStore (rootReducer, initialState, composel 加 中 间 件 
applyMiddleware (thunk, crashReporting) 

return store; 


} 


这 只 是 使 用 Redux 中 间 件 所 能 做 的 一 个 小 尝试 。Redux 的 大 量 文档 包含 了 Redux 的 丰富 信 
息 以 及 设计 和 API 用 法 的 洞察 ， 并 且 提 供 了 优秀 的 示例 。 


10.3 小 结 


下 面 是 本 章 的 主要 内 容 。 
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Redux 是 一 个 库 ， 也 是 一 种 应 用 架构 ， 它 不 需要 与 任何 特定 的 库 或 框架 一 起 使 用 。 但 它 尤 
其 适用 于 React， 它 作为 状态 管理 和 应 用 架构 的 首选 工具 ， 在 很 多 React 应 用 中 广 受 欢迎 。 
Redux 注重 可 预测 性 ， 并 强制 使 用 严格 的 数据 处 理 方法 。 

store 是 一 个 作为 应 用 的 真相 之 源 的 对 象 ， 它 是 应 用 的 全 局 状态 。 

Flux 允许 有 多 个 stores， 但 Redux 只 人 允许 一 个 。 

reducer 是 Redux 用 来 基于 给 定 action 计算 状态 变化 的 晒 数 。 

Redux 在 许多 方面 与 Flux 类 似 ， 但 Redux 引入 了 reducer 的 思想 ， 只 有 单一 store， 并 且 
它 的 action 创建 器 不 直接 派发 action。 

action 包含 了 关于 发 生 的 事情 的 信息 。 它 们 必须 具有 类 型 ， 但 可 以 包含 store 和 reducer 
需要 的 确定 如 何 更 新 状态 的 任何 额外 信息 。 在 Redux 中 ， 整 个 应 用 只 有 一 棵 状态 树 ， 所 
有 状态 都 位 于 一 个 区 域 且 只 能 通过 特定 的 API 进行 更 新 。 

action 创建 器 是 一 个 国 数 ,这 个 图 数 返 回 可 由 store 派发 的 action。 通 过 特定 的 中 间 件 ( 参 
见 下 一 项 ), 开发 者 可 以 创建 异步 action 创建 器 ， 这 对 于 调用 远程 API 之 类 的 事情 非常 
有 用 。 

Redux 人 允许 开发 者 编写 中 间 件 , 将 目 定 义 行为 注入 Redux 状态 管理 流程 。 中 间 件 在 reducer 
激发 之 前 执行 ， 它 允许 开发 者 为 应 用 实现 一 些 副作用 或 实现 一 些 全 局 解决 方案 。 


在 下 一 章 中 ， 我 们 将 继续 使 用 Redux， 了 解 reducer 并 将 它们 集成 到 React 应 用 中 。 


第 芷 章 Redux 进 阶 及 Redux 与 
React 集成 


本 章 主要 内 容 

图 ”reducer 一 一 Redux 决定 状态 如 何 改变 的 方法 
图 ”在 React 应 用 中 使 用 Redux 

国 ”将 Letters SGcial 转换 为 使 用 Redux 应 用 架构 
国 ”为 应 用 添加 给 帖子 点 赞 和 评论 的 功能 


在 本 草 中 , 我 们 会 继续 上 一 章 的 工作 , 构建 Redux 架构 的 基本 元 素 。 我 们 将 把 Redux 的 action 
和 store 集成 到 React 中 ， 并 探索 reducer 的 工作 原理 。Redux 是 Flux 模式 的 一 个 变种 , 但 它 在 设 
计时 就 考虑 了 React， 所 以 能 很 好 地 与 React 的 单 问 数据 流 和 API 一 起 工作 。 虽 然 它 并 非 普 遍 选 
择 , 但 许多 大 型 React 应 用 在 实现 状态 管理 解决 方案 时 都 会 将 Redux 作为 首选 之 一 。 读者 在 Letters 
Social 中 也 会 跟 者 这 样 做 。 
如 何 获 取 本 章 代 码 
和 每 章 一 样 ， 读 者 可 以 去 GitHub 仓库 检 出 源 代码 。 如 果 想 从 头 开始 编写 本 章 代 码 ; 可 以 使 用 第 7 
章 和 第 8 章 的 已 有 代码 ( 如 果 跟 着 编写 了 示例 ) 或 直接 检 出 指定 章 的 分 支 ( chapter-10-11 )。 
记 住 ， 每 个 分 支 对 应 该 章 末 尾 的 代码 ( 例如 ，chapter-10-11 对 应 本 章 末尾 的 代码 )。 读者 可 以 在 选 
定 目录 下 执行 以 下 终端 命令 之 一 来 获取 当前 章 的 代码 。 
如 果 还 没有 代码 库 ， 请 输入 下 面 的 命令 来 获取 : 
git clone git@github.com:react-in-action/letters-social.git 
如 果 已 经 克隆 过 代码 仓库 ， 
git checkout chapter-10-11 
如 果 你 是 从 其 他 章 来 到 这 里 的 ， 则 需要 确保 已 经 安装 了 所 有 正确 的 依赖 


npm instary 
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111 reducer 决定 状态 应 该 如 何 改变 


我 们 能 够 创建 和 派发 action 以 及 处 理 错误 ， 但 还 不 能 做 任何 事情 来 改变 状态 。 还 需要 设置 
reducer 来 处 理 传人 的 action。 记 住 ，action 上 ; 只 是 用 来 描述 发 生 了 什么 事 情 并 说 明 所 发 生 事情 的 相 
关 信 息 的 一 种 方式 ， 仅 此 而 已 。 而 reducer 的 工作 则 是 指定 store 的 状态 应 当 怎样 啊 应 这 些 action 
进行 改变 。 

图 11-1 展示 了 reducer 如 何 纳 入 到 我 们 一 直 关 注 的 Redux 全 局 图 中 。 


Po dd bedded 









发 送 到 dispacher 和 的 action 


action 


事件 触发 
action 人 创建 禹 








action 仔 建 咒 





2 reduce 


action 


(如 Google Analytics、 = 
men 由 | Type. FETCH_API_DATA 
招 [Panoaa { 1d. 1233 
这 一 
2 RD 
S ' giclick、 kevup、, 

Eee | ' : Es ha ky 
' 9 1 ocus、change 

epg 从 视图 (React 组 件 ) 

创建 新 状态 。 ， 于 | | E| 
, ey 1 | const Component = {props} => { | 
1 2 i | return { | 
1 vO ' | <Button 
| 三 i | onciie ck={this.handieButtonClick} 
! 2 ' ‘data={props dat | ”组 件 将 状态 作为 
' | .| 属性 接收 
' | | \ | 
: a 

新 store 状 态 ' [| 更 新 
已 经 存在 ，! 

| 
1 
4 
1 
1 
1 


Bnei = 


图 11-1 reducer 只 是 函数 ， 用 于 确定 应 该 对 状态 进行 哪些 更 改 。 可 以 将 它们 
视 为 某 种 应 用 程序 状态 网 关 ， 用 来 严格 控制 传 入 的 更 改 


但 什么 是 reducer? 到 目前 为 止 ， 如 果 嘉 欢 Redux 的 简单 便捷 ， 将 不 会 对 reducer 感到 失望 : 
它们 (reducer ) 只 是 一 些 简单 的 、 目 标 单 一 的 函数 。 ia 是 把 前 一 个 状态 和 action 当 作 人 参数， 
返回 下 一 个 状态 的 纯 函 数 ( 上 下 文 无 关 的 函数 )。 根据 Redux 的 文档 ， 这 些 困 数 之 所 以 叫 作 reducer 
是 因为 它们 的 方法 签名 与 传递 给 Array .prototype.reduce 的 一 样 ( 举 个 例子 ，[1，2， 
3] .reduce ((a, b)=>a + b, 0)), 
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reducer 必须 是 纯 函 数 ， 意 思 就 是 给 这 个 函数 同样 的 输入 ， 每 次 都 会 产生 相同 的 相关 输出 结 
果 。 这 与 产生 副作用 并 稼 第 进行 API 调用 的 action 或 中 间 件 形成 鲜明 对 比 。 在 reducer 中 执行 任 
何 异 步 或 者 不 纯 的 操作 〈 如 调用 Date .now 或 者 Math.random() ) 是 反 模 式 的 ， 可 能 降低 应 
用 的 性 能 和 可 靠 性 。Redux 文档 中 明确 指出 :“ 给 定 相同 的 参数 ，reducer 应 该 计算 下 一 状态 并 将 
它 返 回 。 没 有 意外 ， 没 有 副作用 ， 没 有 API 调用 ， 没 有 更 改 ， 只 是 计算 。” 


11.1.1 状态 的 结构 与 初始 状态 


reducer 即将 开始 处 理 单个 Redux store 的 修改 ， 因 此 是 时 候 讨 论 一 下 采用 什么 结构 的 store。 
设计 任何 应 用 程序 的 状态 结构 即 会 影响 应 用 UI 的 工作 方式 , 也 会 受 应 用 UI 工作 方式 的 影响 , 但 
是 通常 最 好 将 “原始 ”数据 与 UI 数据 尽 可 能 地 分 离 。 一 种 方式 是 将 诸如 ID 之 类 的 数据 与 其 对 应 
的 数据 分 开 存 储 ， 并 使 用 ID 来 查询 数据 。 

我 们 将 创建 一 个 初始 状态 文件 来 帮助 确定 状态 的 形式 和 结构 。 在 constants 目录 中 ， 创 建 一 
个 名 为 initialState.js 的 文件 。 这 将 是 任何 action 被 派发 或 任何 更 改 发 生 之 前 Redux 应 用 的 状态 。 
这 个 状态 文件 将 包 售 有 关 钳 误 和 “加 载 中 ”状态 的 信息 ,以 及 关于 帖子 、 评 论 和 用 户 的 一 些 信息 。 
我 们 将 在 数组 中 存储 评论 和 帖子 的 ID, 并 将 这 些 ID 对 应 的 主要 信息 存储 在 可 以 轻松 引用 的 对 象 
中 。 代 码 清单 11-1 展示 了 设置 初始 状态 的 示例 。 


代码 清单 11-1 初始 状态 以 及 状态 结构 ( src/constants/initialState.js ) 





export default { 





SOR Nl | Redux 用 作 其 初始 状态 的 对 象 

loading: false, 

BOStLQSs | 

posts: {}, 将 评论 ID 和 帖 

commentIds: []， 子 ID 与 实际 数 

comments: {}, 据 分 开 存储 

pagination: { 存储 分 页 链接 (通过 
first: ‘${process.env HTTP 头 接收 ) 一 一 这 

.ENDPOINT} /posts? page=1& sort=date& order=DESCE& AN 

_embed=comments& expand=user& embed=]likes ， 只 是 众多 分 页 实现 方式 

riexts Till; 的 一 种 


prev: null, 
asts Tul 
} ， 


user: { 
authenticated: false;, 存储 用 户 身 份 
BrofilePpicture: null; 验证 状态 信息 
le Ll 


name: null, 
tokern: nll 
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11.1.2 ”设置 reducer 来 响应 传 入 的 action 


设置 好 初始 状态 之 后 ， 我 们 应 该 创建 一 些 reducer 来 处 理 传人 的 action， 以 便 store 能 够 得 到 
更 新 。reducer 通常 使 用 switch 语句 来 匹配 传人 的 action 类 型 ， 而 后 更 新 状态 。 它 们 返回 一 个 
将 被 用 到 的 新 的 状态 副本 ( 不 是 经 过 更 改 的 同一 个 版 本 ) 来 更 新 store。reducer 还 执行 儿 底 行为 ， 
以 确保 未 知 类 型 的 action 仅 返 回 现 有 状态 。 有 一 个 之 前 已 经 提 及 的 重要 事项 需要 再 次 重申 : 
reducer 执行 计算 并 且 应 该 根据 给 定 的 输入 每 次 返回 相同 的 输出 ; 不 应 该 引起 任何 副作用 或 者 执 
行 不 纯 的 操作 过 程 。 

reducers 负责 计算 store 如 何 改变 。 在 大 部 分 应 用 程序 中 ， 开 发 人 员 会 有 很 多 reducers， 它 们 
各 自负 责 store 的 一 个 切片 。 这 有 助 于 保持 这 些 文件 整齐 划一 。 开 发 人 员 最 终 会 使 用 Redux 的 
combineReducers 方法 将 多 个 reducer 合并 成 一 个 。 大 部 分 reducer 都 使 用 switch 的 case 语 
句 处 理 不 同 的 action 类 型 并 用 底部 的 default 来 保证 未 知 的 action 类 型 ( 如 果 有 的 话 , 也 许 是 意外 
创建 的 ) 不 会 对 状态 产生 任何 意外 影响 。 

reducer 还 会 创建 状态 的 副本 ， 而 不 会 直接 改变 现存 的 store 状态 。 如 果 回 看 图 11-1， 可 以 看 
到 reducer 执行 工作 时 使 用 了 状态 。 这 种 方法 类 似 不 可 变数 据 结构 的 工作 方式 ; 创建 改变 的 副本 
而 不 是 直接 改变 。 代 码 清单 11-2 展示 了 如 何 设 置 “ 加 载 中 ”状态 的 reducer。 注 意 ， 这 种 情况 仅 
需要 处 理 一 个 “局 平 ”的 状态 切片 (布尔 类 型 的 1o0ading 属性 ) 所 以 仅 需 返回 true 或 false 
给 新 状态 。 读 者 经 常会 处 理 具 有 多 个 键 或 者 藤 套 属性 的 状态 对 象 ， 并且 reducer 需要 做 比 返回 
true 或 false 更 多 的 事情 。 





代码 清单 11-2 设置 “加 载 中 ”状态 的 reducer ( src/reducers/loading.js ) 


import initialState from '../constants/initialState'; 阴 数 接收 两 个 参数 ， 
1 支 ' 7 。 
limport as types from '‘'../constants/types'; state 和 action 
export function loading(state = initialState.loading, action) { 
switch (action.type) 1 
case types.app.LOADING: 如 果 action 有 “加 载 中 ”的 类 型 , 返 
returen. Lrues | 回 true 给 新 状态 值 
casée types.app.LOADED: 
return false; 处 理 已 加 载 的 情况 
default: 人 、 
return states 坎 认 返回 并 返回 相应 的 false 
}} 现 有 状态 


通常 ， 会 使 用 switch 语句 来 明确 处 理 每 个 action 
类 型 ， 以 及 在 默认 情况 下 返回 现 有 状态 


现在 ， 当 一 个 与 “加 载 中 ”相关 的 action 被 派发 ，Redux store 对 此 将 能 有 所 行动 。 当 一 个 
action 传 进来 并 通过 所 有 中 间 件 ,Redux 将 会 调用 reducer 来 根据 action 确定 应 该 创建 什么 新 状态 。 
在 设置 任何 reducer 之 前 ，store 无 法 知道 action 中 包含 的 更 改 信息 。 为 了 展示 这 一 点 , 图 11-2 从 
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流程 中 删除 了 reducer; 看 看 action 为 何 无 法 到 达 store? 


7 一 一 一 和 


发 送 到 中 Spacher 的 action 


Pr 
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11-2 有 reducer 在 ， 当 actions 被 派发 时 ，Redux 将 会 知道 如 何 对 store 进行 更 改 。 在 中 等 复杂 的 应 用 
程序 中 ， 通 常 有 很 多 不 同 的 reducer， 各 自负 责 自 己 的 store 状态 “切片 ” 


接 下 来 , 我 们 会 创建 另 一 个 reducer 来 让 Redux 技能 发 挥 作 用 。 毕 竟 , 许多 reducer 不 会 仅仅 
返回 true 或 者 false, 或 者 至 少 如 果 它 们 这 样 做 , 也 会 比 计算 true 或 者 false 要 做 的 更 多 。 
Letters Social 应 用 的 另 一 个 关键 部 分 是 显示 和 创建 帖子 ， 我 们 需要 将 其 迁移 到 Redux。 就 像 将 一 
个 真实 的 React 应 用 迁移 到 Redux 一 样 , 应 该 能 够 保留 很 多 应 用 已 经 使 用 的 逻辑 并 将 它们 转换 成 
Redux 友好 的 形式 。 我 们 将 创建 两 个 reducer 来 处 理 帖 子 以 及 一 个 reducer 来 追踪 帖子 的 ID 。 在 大 
型 应 用 中 , 我 们 也 许 会 将 这 些 合并 到 另 一 个 健 下 , 但 现在 让 它们 保持 分 开 的 状态 也 不 错 。 这 也 作 
为 设置 多 个 reducers 来 处 理 单个 action 的 示例 。 代 码 清 单 11-3 展示 了 如 何 创建 评论 的 reducer。 
虽然 会 在 这 里 创建 不 少 reducer， 但 一 旦 完成 ， 应 用 将 不 仅 对 可 能 发 生 的 action 有 全 面 的 描述 ， 
而 且 会 对 状态 可 能 改变 的 方式 有 全 面 的 描述 。 


代码 清单 11-3 创建 评论 的 reducer ( src/reducers/comments ) 





用 switch 语句 决定 如 何 reducer 是 男 数 ， 其 接收 状 
啊 应 传 进来 的 action 态 对 象 和 action 

import initialState from ',.. /constants/initialState'; < 一 | 引入 初始 状态 

import * as types from '../constants/types'; 

export function comments (state = initialState.comments, action) ({ 





SWitceh (aetLion. type) 1 
case types.comments.GET: { 
const { comments } = action; 
let nextState = Object.assign({}, state),; 


对 于 GET， 创建 状态 的 副本 
并 添加 还 没有 的 评论 





228 第 11 章 Redux 进 阶 及 Redux 与 React 集成 


for (let _ comment of comments) 1{ 
if (InextState[comment.id]) 1{ 
nextState[comment.id] = comment; 


} 
| 返回 新 状态 
return nextState; 
} 


case types.comments.CREATE: |{ | 将 新 评论 添加 
) 


到 状态 中 


const { comment } = action; 

let nextState = Object.assign({}, state); 
nextState[comment.id] = comment,; 

return nextState; 


} 
default: | 默认 返回 同样 


return state; 
的 状态 
} 


export function commentIds (state = initialState.commentIds, action) { 
switch (action.type) { 
case 七 YPes .CommentsS .GET: 1{ 
Const nextCommentIds = action.Ccomments .map (comment 三 > 


Comment .id); 由 
个 状态 的 | iet TextState = Array. from(state)} ie 


个 站 太 for (let commentlId of nextCommentIds) { 
| 状态 的 a 和 存储 了 
副本 if (!state.includes (comment1Id)) 1{ 
nextState.push (Comment 上 Id) ; 
} 
} 


return nextState; 


} 
case types.comments.CREATE: { 


const { comment } = action; 存 人 新 ID 


let nextState = Array.from(state); 
nextState.push (comment .id); 
return nextState,; 


} 
default: 
return state,; 


} 


现在 ， 当 派发 与 评论 相关 的 action 时 ，store 的 状态 会 相应 更 新 。 注意 到 程序 是 如 何 能 够 啊 应 
那些 严格 说 来 不 是 相同 类 型 的 action 吗 ? reducer 可 以 响应 在 其 管辖 范围 内 的 action, 即使 它们 不 
是 完全 相同 的 类 型 。 这 是 必须 做 到 的 ， 因 为 即使 “帖子 ”的 状态 分 片 管理 着 帖子 ， 其 他 类 型 的 
action 仍然 可 能 影响 它 。 这 里 的 要 点 是 ，reducer 负责 决定 状态 的 特定 方面 如 何 改变 ， 而 不 管 传 人 
是 哪个 action 或 哪 种 action 类 型 。 有 些 reducer 可 能 需要 知道 许多 不 同类 型 的 action ,而 这 些 action 

与 reducer 操纵 的 资源 ( 帖子 ) 没有 特定 关系 。 

现在 已 经 创建 了 评论 的 reducer， 可 以 创建 处 理 帖 子 的 reducer Te 这 与 评论 的 reducer 非常 相 
似 ， 可 以 采用 相同 的 策略 将 它们 分 别 存 储 为 ID 和 对 象 。 这 里 还 需要 了 人 解 如 何 处 理 为 帖子 点 上 先 和 踩 
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帖子 (我们 已 经 在 第 10 章 为 这 个 功能 创建 了 action )。 代 码 清单 11-4 展示 了 如 何 创 建 这 些 reducer。 





代码 清单 11-4 ”创建 帖子 的 reducer { Src/reducers/posts.js ) 





import initialState from '../constants/initialState'; 
import * as types from '‘'../constants/types'; 
export function posts(state = initialState.posts, action) { 


switch (action.type) { 
Case types .posts.GET: f{ 
COonst { ostS 二 = actions 处 理 获得 的 新 帖子 
let nextState = Object.assign({}, state),; 
for (let post of Posts) + 
if (!'nextState[post.id]) { 
nextState[post.id] = post; 


} 
return nextState; 
} 
case types.posts.CREATE: 1 
const { post } = action; 
let nextState = Object.assign({}, state); 
if (!InextState[post.id]) i 
nextState[post.id] = post,; 
} 
return nextState,; 
} 


case types.comments.SHOW: { 


let nextState = Object.assign({}, state); 显示 或 隐藏 
nextState[action.pPostId] .showComments = true; 对 一 个 帖子 
return nextSsState; Wi 

) 的 评论 


case types.comments.TOGGLE: 1{ 
let nextState = Object.asslign({}，state) ; 
nextState [action.PostId] .showComments = 
InextState[action.PostId] .showCommentsS ; 


return nextState; 给 帖子 点 赞 或 者 踩 帖 子 ， 这 涉 
及 用 来 自 API 的 新 数据 更 新 状 


case types.posts.LIKE: { -Ae 
let nextState = Object.assign({}, state); 仿 内 的 特定 帖子 


const oldPost = nextStatel[laction.post.id]; 
nextStatel[laction.post.id] = Object.assign({}, oldPost, action.post); 
return nextState,; 









} 

Case types.posts.UNLIKE: { 
let nextState Object.assign({}, state); 
const oldPost = nextState[action.post.id]; 
nextState[action.post.id] = Object.assign({}, oldPost, action.post); 
return nextState,; 


} 

case types.comments.CREATE: { 
const { comment } = action; 
let nextState = Object.assign({}, state); 
nextState [comment .postId] .comments .Push (Commen 七 ) ; 
return state; 
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} 
default: 
return state,; 


用 与 处 理 评论 


} 相同 的 方式 处 
ee | 理 新 ID 
exBport function BostTrlds (state = initialstate.postIids; action) 4 


Switch (action.type) { 
case types.posts.GET: 1 
const nextPostIds = action.posts.map (Post => post.id); 
let nextState = Array.from(state); 
for (let Post of nextPostIds) { 
if (!state.includes (post)) 1{ 
nextState.push (post),，; 
} 
} 
return nextState; 
} 
case types.posts.CREATE: { 


Const { post } = action; 
let nextState = Array.from(state); 
If (!state.includes(post.id)) 1 


nextState.push (Post .1Q) :; 
} 
return nextState,; 
} 
default: 
return state,; 


} 


这 些 文件 中 包含 了 两 个 reducer， 因 为 它们 密切 相关 而 且 处 理 相 同 的 基础 数据 (帖子 和 评论 )， 
但 读者 也 许 会 发 现 ， 大 部 分 情况 下 开发 人 员 为 了 简单 只 想 每 个 文件 一 个 reducer。 多 数 情 况 下 ， 
reducer 的 设置 会 反映 或 者 至 少 遵 循 store 的 结构 。 读者 或 许 已 未 注 意 到 其 中 的 微妙 之 处 一 一 设计 
store 结构 的 方法 ( 参见 本 章 早 前 设置 的 初始 状态 ) 会 极 大 地 影响 如 何 定义 reducer， 并 在 较 小 的 
程度 上 也 会 影响 如 何 定 义 action。 由 此 得 出 的 结论 是 ,一 般 而 言 花费 更 多 时 间 来 设计 状态 的 结构 
比 随意 处 理 它 要 好 。 在 设计 上 花费 太 少 时 间 也 许 会 导致 大 量 返工 来 改善 状态 的 结构 。 而 坚实 的 设 
计 外 加 Redux 所 给 予 的 模式 会 让 添加 新 功 更 容易 。 


迁移 到 Redux: 值得 吗 ? 
”我 在 本 章 中 已 经 提 过 好 几 次 ，Redux 的 初始 设置 可 能 颇 费 周章 也 许 读者 正在 感受 )， 但 最 终 这 往往 
是 值得 的 。 显 然 不 可 能 所 有 情况 都 如 此 ， 但 我 发 现 我 参与 的 项 目的 确 如 此 ， 而 且 我 认识 的 其 他 工程 师 
参与 的 项 目 也 是 如 此 。 我 参与 的 一 个 项 目 涉及 将 应 用 程序 从 Flux 完全 迁移 到 Redux 架构 。 整 个 团队 大 约 
花费 了 一 个 月 的 时 间 ， 但 我 们 能 够 以 最 小 的 不 稳定 性 和 bug 来 开始 应 用 程序 的 重 写 。 SS 

然而 ， 正 是 因为 Redux 帮助 我 们 落实 到 位 的 那些 模式 ， 总 体 结果 是 能 够 更 快 地 对 产品 进行 迭代 。 
迁移 到 Redux 的 几 个 月 后 ， 我 们 最 终 完成 了 应 用 的 一 系列 重新 设计 。 即 使 我 们 最 终 重 构 了 应 用 的 大 部 
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分 React， 但 Redux 架构 意味 着 只 需 对 应 用 的 状态 管理 和 业务 逻辑 部 分 进行 相对 较 少 的 修改 。 更 重要 
的 是 ，Redux 提供 由 模式 使 得 在 必要 之 处 添加 应 用 状态 时 非常 简单 。 集成 Redux 的 好 处 超过 了 初始 设 


置 以 及 将 用 迁移 到 Redux 上 的 付出 ， 而 且 会 在 之 后 很 长 时 间 持续 产生 效 刘 


处 理 了 一 些 更 为 复杂 的 reducer. 之 后 ， 我 们 将 通过 创建 错误 处 理 、 分 页 和 用 户 的 reducer 来 完 
结 Redux 的 reducer 部 分 。 在 代码 清单 11-5 中 ， 我 们 将 从 创建 错误 处 理 的 reducer 开始 。 








代码 清单 11-5 ”创建 错误 处 理 的 reducer ( src/reducers/error.js ) 





import initialSstate from '.. /constantsyinitialstate", 
import * as types from '../constants/types'; 
export function error (state = initialState.error, action) { 


Switch (action.type) { 
Case types .app.ERROR: 


人 二 大 
return action.error; 这 卜 状态 分 片 并 不 
default: 复杂 ， 派 发 action 
return state; 上 的 错误 


} 


接 下 来 , 需要 确保 分 页 状态 可 以 被 更 新 。 现 在 , 分 页 只 与 帖子 相关 , 但 更 大 的 应 用 中 或 许 要 
为 应 用 的 许多 不 同 部 分 设置 分 页 ( 举 个 例子 ， 当 一 个 拥有 非常 多 评论 的 帖子 需要 一 下 展示 出 来 
时 )。 对 于 这 个 示例 应 用 ， 只 需要 处 理 简单 的 分 页 即 可 ， 所 以 我 们 在 代码 清单 11-6 中 创建 了 一 个 


分 页 reducer。 





代码 清单 11-6 ”创建 分 页 的 reducer ( src/reducers/pagination.js ) 


import initialState from /constants/initialState",; 
import * as types from '../constants/types'; 
export function pagination(state = initialState.pagination, action) { 
switch (action.type) { 
用 新 的 case types.posts.UPDATE LINKS: 创建 前 一 个 状态 的 副本 
分 页 信 const nextState = Object.assign(f)， state) ; 并 合并 action 的 荷载 中 
人 fo (Cet RK 1 Sctlon: TDKS7 { 的 URL 
息 来 更 if (action.links.hasOwnProperty(k)) { 
新 那些 if (process.env.NODE ENV === 'production') i 
URL nextState[k] = 
action,. linkslk}) url. Zeplace(l/lhttps WY \ /i, "Httpay7 ys 
} else { 
更 新 每 个 nextState[k] = action.links[k] .url; 
链接 类 型 ) 由 于 部 署 到 ZEIT 时 Letters Social 
return nextState; 请 忽略 应 对 此 问题 的 办 法 
default: 


return state,; 
} 
现在 ,需要 创建 reducer 来 啊 应 用 户 相 关 的 事件 ， 比 如 登入 和 登 出 。 在 这 个 reducer 中 ， 还 会 
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将 一 些 cookie 存储 在 浏览 锅 上 ， 以 便 之 后 第 12 章 处 理 服务 端 演 染 时 使 用 它们 。cookie 是 服务 端 
发 送 给 用 户 浏 览 右 的 小 片 数 据 。 虽 然 读者 可 能 由 于 日 常 使 用 计算 机 而 熟悉 cookie ( 有 些 网 站 会 出 
于 法 律 原因 提醒 用 户 )， 但 也 许 之 前 从 未 以 编程 方式 处 理 过 它们 。 没 关系 。 我 们 将 使 用 js-cookie 
库 与 cookie 交互 , 我 们 所 要 做 的 就 是 当 用 户 验 证 状态 变化 时 设置 或 删除 特定 的 cookie。 代码 清单 
11-7 展示 了 创建 用 户 的 reducer 来 实现 这 一 点 。 


代码 清单 11-7 ”创建 用 户 的 reducer ( src/reducers/user.js ) 





imDOrt CooOkies from JS-CDOKILE 7 7 
ea initialState Se "s/constants/initialSstate’; | 隆信 js-cookie 库 以 便 使 用 
import * as types from '../constants/types'; 
export function Duser (state = initialState.user, action) { 
switch (action.type) 1 
case types.auth.LOGIN SUCCESS: | 从 action 中 取得 user 和 token 
const { user, token } = action,; 
Cookies.set('letters-token', token); 
return Object.assign({}, state.user, 使 用 js-cookie 将 token 作 为 
authenticated: true, cookie 存储 到 浏览 器 上 
name: user.name, 
Td: User, td, 
profilePicture: user.profilePicture || 返回 新 用 户 数 据 ( 包括 token ) 
'/static/assets/users/4.jpeg', JIk- 太 如 | 
ete 的 状态 副本 
} ) ; 
case types.auth.LOGOUT SUCCESS: 当 用 户 登 出 时 ， 将 用 户 状态 置 为 
Cookies 。 TS ("letters-token'); 初始 状态 并 清除 cookie 
return initialState.user; 
default: 


return state; 


11.1.3 将 reducer 合并 到 store 


最 后 ， 需 要 确保 将 reducer 与 Redux store 整合 在 一 起 。 尽 管 已 经 创建 了 这 些 reducer, 但 它 
们 目前 没有 任何 联系 。 让 我 们 重新 看 一 下 第 10 章 创建 的 根 reducer, 看 看 如 何 问 其 添加 新 reduer。 
代码 清单 11-8 展示 了 如 何 将 我 们 创建 的 reducer 添加 到 根 reducer。 这 里 务必 要 注意 的 是 ， 
combineReducers 会 根据 传人 的 reducer 在 store 中 创建 键 .对 于 代码 清单 11-8 中 的 情况 ,store 
的 状态 会 拥有 loading 和 posts 键 ， 每 个 都 由 它们 自己 的 reducer 管理 。 这 里 使 用 了 ES2015 
的 简洁 属性 表示 法 ， 如 采 读 者 想 的 话 ， 也 可 以 把 最 终 的 键 信 名 为 不 同名 称 。 一 定 要 注意 ,不 要 
党 得 函数 名 必须 直接 绑 定 到 store 的 键 上 。 





代码 清单 11-8 将 新 reducer 添加 到 已 存在 的 根 reducer ( src/reducers/root.js ) 


import { combineReducers } from 'redux'; 
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import { error } from '‘'./error'; 
import { loading } from './loading'; : i 
import { pagination } from './pagination'; 导入 reducer， 以便 可 以 将 它 
inc { Bosts, postIids } fyom "./poste’; 们 添加 到 根 reducer 中 
mport { USer } from ESGLY 7 
import { comments, commentIds } from './comments'; 
\ 

const rootReducer = combineReducers ({ 

commentIds, 

comments, 

i combineReducers 会 将 每 

ja 个 reducer 挂 载 到 相应 的 

pagination, 键 上 , 如 想 要 , 也 可 以 改 

postI1Ids, 变 键 的 名 称 

posts, 

user 


于 类 


export default rootReducer; 


11.1.4 测试 reducer 


得 益 于 reducer 纯 困 数 和 没有 耦合 的 特性 一 一 它们 只 是 晒 数 ,测试 Redux 的 reducer 非常 简单 
直接 。 要 测试 reducer， 应 该 断言 对 于 给 定 的 输入 它们 应 该 生成 特定 的 状态 。 代 码 清 单 11-9 展示 
了 如 何 测试 为 帖子 和 帖子 ID 的 状态 所 创建 的 reducer。 和 Redux 的 其 他 部 分 一 样 , reducer 是 函数 
这 一 点 使 它们 易于 隔离 和 测试 。 





代码 清单 11-9 测试 reducer ( src/reducers/posts.test.js ) 


jest.mock('js-cookie'); 
| 模拟 js-cookie 库 


import Cookies from ‘js-cookie'; 





import { user } from '../../src/reducers/user'; 导入 需要 测试 的 
import initialState from '../../src/constants/initialState'; 
. reducer 和 类 型 
mort * as types oh '。 /sedBrcieonstantes/tyDes's 
describe('user', () => 1 断言 默认 会 返 
test (" ShoulaQ return the initial state', () => 1 回 初始 状态 
expect (user (initialState.user, {})) .toEqual (initialState.user); 
} ) ; 
test ( ` S${types .auth.LOGIN _ SUCCESS} ，() => 1 
Const mockUser = { 
name: "name '"， 
二 创建 要 断言 的 模 
profilePicture: 'pic' 拟 用 户 、token 和 
时 期 望 状 态 
const mockToken = 'token'; 
const expectedState = { 
name: "name '， 
全 


profslePieture” "pe”, 
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token: mockToken, 


authenticated: true 给 定 一 个 登录 action， 断 言 
状 太 控 笑 期 区 恋 : 
EXBDeCT ( 状态 按 预 期 改变 


user (initialState.user, { 
type: types.auth,.LOGIN SUCCESS, 
user: mockUser, 
token: mockToken 


}) 断言 模拟 cookies 会 被 
) .toEqual (expectedState); 访问 


expect (Cookies) .toHaveBeenCalled ()， 


})? 


test( $s{types.auth.LOGOUT SUCCESS}, browser , () => 1 
expect ( 
user (initialState.user, 对 LOGOUT_SUCCESS 的 action 
type: sin 
} ) 


) . tomaqual(LnitlalSstate. DScer) } 
expect (Cookies) .toHaveBeenCalled () ; 
站 
i 的， 


到 目前 为 止 , 我 们 介绍 了 Redux 应 用 的 大 部 分 基础 知识 : store、reducer、action 以 及 中 间 件 ! 
Redux 生态 系统 很 健壮 , 有 很 多 领域 读者 可 以 自行 浏览 。 我们 忽略 了 API 及 Redux 生态 系统 的 某 
些 部 分 ， EA 选择 各 《与 store 状态 交互 的 优化 方案 ) 等 。 我 们 还 特意 省 略 
了 对 store API 的 全 面 介 绍 ( 举 个 例子 ， 如 使 用 store .subscribe () 与 更 新 事件 交互 )。 这 是 
因为 处 理 这 部 分 Redux ene react-redux 库 中 。 我 还 在 我 的 博客 上 整理 了 
React 生态 系统 的 指南 ， 也 包括 Redux。 


练习 11-1 判断 对 错 ， oo 
“虽然 Redux 相对 于 它 做 的 事情 还 只 是 一 个 很 小 的 话 ， 但 它 对 于 数据 流 如 何 处 理 storereducervaction 
和 国有 上下 。 花 时 音信 下面 了 过 村 此 昌 角 时 
量 。 reducer 应 该 直接 修改 现 有 状态 。( TIF ) | 
时 。 Redux 默认 包含 一 种 处 理 异步 任务 ( 比如 网 络 请 求 ) 的 方法 。( TIF) 
5 每 个 reducer 缺 省 包含 一 个 初始 状态 是 个 不 错 的 主意 。( [下 
reducer 可 以 被 合并 ， 这 让 分 离 状态 分 片 更 容易 。 (TIF ) 人 
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我 们 在 Redux 上 已 经 取得 不 错 的 进展 , 但 此 刻 React 组 件 对 此 一 无 所 知 。 我 们 还 需要 以 某 种 
方式 将 它们 结合 起 来 。 我 们 已 经 构建 出 要 使 用 的 reducer、action 和 store， 完 成 了 Redux 的 设置 
过 程 ， 现 在 可 以 开始 将 新 架构 与 React 进行 特价。 读者 也 许 已 经 注意 到 ， 不 需要 对 React 做 太 多 
bah Redux 局 动 并 运行 起 来 。 这 是 因为 Redux 可 以 在 不 考虑 特定 框架 的 情况 下 进行 实 
\ 需 要 任何 框架 。 诚 然 ，Redux 的 工作 方式 与 React 应 用 尤为 契合 ， 而 这 至 少 是 
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Redux 成 为 React 应 用 架构 最 受 欢 迎 的 选择 之 一 的 部 分 原因 。 但 记 住 ， 即 使 开始 集成 React 和 
Redux， 仍 然 可 以 将 Redux 和 Angular、Vue、Preact 或 者 Ember 集成 。 


11.2.1 容器 组 件 与 展示 组 件 


当 把 Redux 集成 到 React 应 用 中 时 ,几乎 可 以 肯定 要 用 到 react-reqdux 库 。 这 个 库 作 为 抽 
象 ， 涵盖 了 将 Redux 的 store 、action 集成 到 React 组 件 中 。 我 会 介绍 一 些 react-redux 的 使 用 
方式 ， 包括 如 何 将 action 引入 组 件 ， 以 及 讨论 一 些 新 组 件 类 型 : 展示 组 件 和 容器 组 件 。 我 们 不 再 
需要 将 状态 分 配 到 多 个 组 件 中 ， 因 为 Redux 负责 用 action 、reducer 和 store 来 管理 应 用 的 状态 。 
青 次 注意 , 创建 不 使 用 Redux 的 React 应 用 本 身 并 没有 任何 问题 ,开发 人 员 依 然 可 以 继续 得 到 使 
用 React 的 其 他 所 有 好 处 。Redux 的 可 预测 性 及 增加 的 结构 使 设计 和 维护 大 型 复杂 React 应 用 更 
加 容易 ， 而 这 正 是 许多 团队 选择 使 用 它 而 非 “ 纯 ”React 的 原因 所 在 。 

这 两 个 新 类 别 的 组 件 ( 展示 组 件 和 容 句 组 件 ) 实际 上 只 是 组 件 已 经 做 的 事情 的 更 有 针对 性 的 
表现 形式 。“ 任 何 旧 ”组 件 与 展示 组 件 或 容 需 组 件 之 间 的 区 别 就 在 于 它们 做 什么 。 展 示 组 件 处 理 
UI 和 UI 相关 的 数据 ， 容 器 组 件 处 理应 用 程序 数据 ( 按 Redux 的 方式 ) ， 而 不 是 让 任何 组 件 去 处 
理 样式 、UI 数据 和 应 用 数据 。 

理解 容 需 组 件 和 展示 组 件 之 间 的 区 别 很 重要 , 程序 也 在 做 相同 的 事情 , 但 是 以 更 好 的 关注 点 
分 离 的 方式 进行 。 我 们 并 没有 将 全 新 的 东西 引入 到 使 用 Redux 的 应 用 中 ; React 组 件 仍然 接收 属 
性 ， 维 护 状态 ， 响 应 事件 ， 并 使 用 与 之 前 相同 的 生命 周期 来 泻 染 。react-redux 提供 的 关键 不 
同 在 于 将 store 、reducer 和 action 整合 到 了 组 件 中 。 而 展示 组 件 和 容 硕 组 件 之 间 的 新 划分 不 过 是 
一 种 让 生活 更 轻松 的 模式 时 了 。 

让 我 们 看 看 这 两 种 在 Redux 架构 的 React 应 用 程序 中 使 用 的 通用 组 件 。 如 前 所 述 , 展示 组 件 是 
“只 用 于 UI” 的 组 件 。 这 意味 着 它们 通常 与 确定 应 用 程序 数据 如 何 更 改 、 更 新 或 发 送 没 有 太 大 关系 。 

以 下 是 展示 组 件 的 一 些 基础 知识 。 

四 它们 处 理事 物 如 何 展 示 而 不 是 数据 如 何 流 动 或 确定 。 

国 它们 仅 在 必要 时 才 拥 有 目 己 的 状态 〈 它 们 是 融 有 文 撑 实 例 的 React 类 );， 大 多 数 时 候 ， 它 

们 应 该 是 无 状态 的 函数 组 件 ， 通 过 react-redux 的 绑 定 接收 来 目 于 Redux 的 属性 。 
国 当 它 们 拥有 上 自己 的 状态 时 , 应 该 是 UI 相关 的 数据 ， 而 不 是 应 用 程序 数据 。 举 个 例子 : 一 
个 打开 或 关闭 的 下 拉 沫 单项 和 它 的 状态 。 

四 它们 不 决定 数据 如 何 加 载 或 者 改变 ， 那 应 该 主要 发 生 在 容 硕 组件 中 。 

国 它们 通常 由 “手工 ”创建 ， 而 不 是 通过 react-redux 库 。 

图 ”它们 也 许 会 持 有 样式 信息 、 像 CSS 类 这 样 的 东西 、 其 他 样式 相关 的 组 件 以 及 任何 其 他 

UI 相关 的 数据 。 

如 果 正 在 探索 React/Redux 生态 系统 ， 可 能 听 别 人 提 过 “smart” 组 件 〈 容 需 组 件 ) 和 “dumb” 
组 件 〈 展示 组 件 )。 这 种 提 法 已 经 过 时 了 ， 因 为 这 非但 一 点 帮助 都 没有 反而 还 有 轻 莽 的 意味 ,但 如 果 
读者 看 到 那些 术语 ， 要 能 把 它们 对 应 到 展示 /容器 分 类 上 。 鉴 于 此 ， 容 器 组 件 完成 以 下 所 有 事情 。 
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作为 数据 源 而 且 可 以 有 状态 ,状态 通常 来 日 于 Redux store。 
将 数据 和 行为 信息 (如 action ) 提供 给 展示 组 件 。 


阶 组 件 ( 从 其 他 组 件 创建 新 组 件 的 组 件 )。 


加 通常 不 会 有 与 应 用 数据 无 关 的 样式 信息 。 举 个 例子 , 在 Redux store 里 的 用 户 资 料 的 状态 分 
片 也 许 会 将 “red” 记 录 为 用 户 “ 最 言 欢 的 颜色 ”,， 但 容 右 不 会 将 该 数据 用 于 任何 样式 ， 它 


只 会 把 数据 传递 给 展示 组 件 。 


在 本 章 中 , 我 们 会 采用 折 中 的 方式 ,将 组 件 分 解 为 展示 组 件 和 连接 组 件 或 容 需 组 件 。 对 于 每 


个 想 要 连接 到 Redux store 的 组 件 ， 将 会 做 如 下 事项 。 
国 ” 除 浓 规 组 件 之 外 ， 通 过 导出 连接 组 件 来 修改 它 。 


国 将 任何 属性 和 状态 移动 到 react-redux 能 够 使 用 的 特定 函数 中 ( 稍 后 会 话 细 


图 | 入 任何 需要 的 action 并 将 其 绑 定 到 组 件 的 actions 属性 上 。 


可 以 包含 其 他 展示 组 件 或 容器 组 件 ; 容器 组 件 作为 包含 许多 展示 组 件 的 父 组 件 是 很 常见 的 。 
通常 使 用 react-redux 库 的 connect 方法 来 创建 ( 稍 后 会 详细 介绍 ) 而 且 通 常 是 高 


国 在 适当 的 情况 下 将 本 地 状态 蔡 换 为 已 经 与 Redux store 建立 映射 的 属性 。 


图 11-3 会 帮助 我 们 更 好 地 了 解 连接 组 件 的 工作 原理 。 里 然 相同 的 Redux 元 素 还 在 ， 但 已 转 


绕 React 组 件 进 行 了 “重新 排列 ”， 以 便 来 自 store 的 更 新 会 传递 给 组 件 。 
ospatéti 东 SEEEEae 
A [A] 开始 Promise 


,如 HTTP  ) 
请 求 ' 






注入 dispatch 


Nm 一 一 一 一 一 一 一 一 一 
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(如 Google Analytics、 


Segment 等 ) | S 

(3 
a 
| 

reducer 执 行 纯 | 总 

更 改 来 创建 新 状态 | 县 corgt Camponen = props} =>{ 
区 “SnC edndtilis ndsBuuon6isi 
(下 | ， data={props.data} 
! 氢 | | 户 
人 store 状 态 的 更 新 被 广 
播 到 各 个 容器 组 件 上 
新 store 状态 ， ， 
已 经 存在 ， 


Se 


aotion 创 建 验 








action 创 建 器 
被 绑 定 到 事件 
处 理 程 序 上 






[v ] 更 新 
[BY] ae 
i 
[E | 事 作 


11-3 ”集成 了 React 的 Redux。react-redux 提供 的 实用 工具 可 以 有 助 于 


生成 组 件 ( 高 阶 组 件 一 一 生成 其 他 组 件 的 组 件 ) 
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本 章 没 有 足够 的 篇 幅 介 绍 我 们 在 本 书 中 接触 到 的 所 有 组 件 的 转换 , 但 容 需 组 件 和 展示 组 件 之 
间 的 区 别 以 及 React 和 Redux 的 集成 方式 应 该 提供 了 一 些 恨 好 的 入门 实践 ,从 而 指明 正确 的 方 回 。 


11.2.2 ”使 用 <Provider /> 将 组 件 连接 到 Redux store 


将 Redux 设置 集成 到 React 应 用 的 第 一 步 是 用 react-redux 提供 的 Provider 组 件 来 包 疙 整 
个 应 用 程序 。 这 个 组 件 接收 Redux store 作为 属性 并 使 该 store 对 “连接 ”组 件 可 用 一 一 男 一 种 描述 
连接 到 Redux 的 组 件 的 方法 。 几 乎 所 有 情况 下 , 这 都 是 React 组 件 和 Redux 集成 的 核心 。 容 需 必 须 
有 一 个 可 用 的 store， 否 则 应 用 程序 就 无 法 正常 运行 ( 甚至 根本 不 会 运行 )。 代 码 清单 11-10 展示 了 


如 何 使 用 Provider 组 件 以 及 更 新 用 户 验 证 监听 需 来 处 理 Redux 的 action。 
代码 清单 11-10 用 react-redux 的 <Provider /> 包装 应 用 程序 





import 
import 
import 
import 


React from ‘react';} 

{ render } from ‘react-dom'; 

{ Provider } from '‘'react-redux'; 
Firebase from 'firebase'; 


import 
import 


* as API from, "v/shared/http"'; 
{ history } from "s/history"; 


import 
import 


configuireStore from "./store/configureStore"; 
initialReduxState from './constants/initialsState'; 


import 
LMDOrt 
import 
import 
import 
import 
import 


Route from './components/router/Route',; 
Router from './components/router/Router'; 
App from './app'’? 

Home from './pages/home'; 

SinglePost from './pages/post'; 

Login from './pages/login'; 

NotFound from './pages/404'，; 


这 里 导入 我 们 需 
要 的 Redux 相关 
模块 


import createError } frem /actiomns/error'? 


import 
import 
import 


import 
import 
import 
import 


Const store = 


loginSuceess } Erom '. /actions/auth': 
Jaaded, loading } from " /actlions/loading'? 
getFirebaseUser, getFirebaseToken } from './backend/auth',; 


四 


./shared/crash ' ; 
./shared/service-worker'; 
./shared/vendor'; 
./styles/styles.scss'; 


用 初始 状态 创建 一 个 


initi X Stor 
configureStore(initialReduzxState):; Redux store 


const renderApp = (state, callback = () => {}) => 1 用 react-redux 的 Provider 包装 路 由 器 
render ( | \ \ 首 欠 它 
store 二 
<Provider store={store}> 并 且 将 传递 给 它 
<Router {...state}> 
<Route path="" component={App}> 


<Route path="/" component={Home} /> 
<Route path="/posts/:postId" component={SinglePost} /> 
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<Route path="/login" component={Login} /> 
<Route path="*" component={NotFound} /> 
</Route> 
</Router> 

</Provider>, 

document .getElementById('app'), 

callback 

); 
及 


const nadlState = 1 
location: window.location.pathname 


}; 


// Render the app initially 


renderApp (initialState),; 
| 历史 监听 需 保 持 不 变 
history.listen(location => { 
Const user = Firebase.auth() .currentUser, 
const newState = Object.assign (initialState, { location: user ? 
location,. Bathname 3 /Ogin' }}; 


renderApp (newState) ; 
四 属 - 


getrFirebaseUser () 
then (async user => { 从 Firebase 获取 用 户 并 派发 一 个 
Tf (user) { 6 有 
加 载 中 ”action 


return history push('/logqln'): 
} 
store.dispatch (loading () ) ; 
const token = await getFirebaseToken () :; 
const es = await API.loadUser (user.uid); 
if (res.status === 404) { 
const userPayload = { 
如 采 没 有 name: a 
用 户 , 就 新 profilePicture: user.photoURL, 
建 一 个 并 id: user.uid 
派发 user }; 
const newUser = await API.createUser (userPayload) .then (zes => 
和 token | 
SS] Son()), 
store.dispatch (loginSuccess (newUser, token)); 
store.dispatch (loaded ()); 
化 合生. DUsh ("Hy 
return newUser; 
} 
const existingUser = await res.json(); 
store.dispatch (loginSuccess (existingUser, token)); 
store.dispatch (loaded ()); 加 载 已 存 
historv. push(/), 在 的 用 户 ， 
return existingUser; 4 然后 派发 
} ) 


.Catch (err => createError (err) ) ; 


"es 
现在 ，store 对 组 件 可 用 了 ， 可 以 将 它们 连接 到 store。 记 得 图 11.3，react-redux 会 将 store 
状态 作为 属性 注入 到 组 件 中 ， 并 在 store 更 新 时 更 改 那 些 属性 。 如 果 没 有 使 用 react-redux， 则 需 
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要 基于 逐个 组 件 手工 订阅 来 日 store 的 更 新 。 

为 了 连接 store， 需 要 使 用 react-redux 的 connect 工具 函数 。 它 会 生成 一 个 连接 到 Redux 
store 的 容器 组 件 〈 因 此 得 名 ) 并 在 store 变化 时 应 用 更 新 。 这 个 connect 方法 仅 有 几 个 参数 ,但 它 
比 年 看 上 去 要 复杂 得 多 。 对 于 正在 完成 的 工作 ， 即 要 使 用 订阅 store 的 能 力 ， 也 要 使 用 注入 store 的 
dispatch 函数 ， 以 便 能 够 为 组 件 创 建 action。 

为 了 注入 状态 , 需要 传人 一 个 图 数 (mapStateToProps ), 该 函数 接收 状态 作为 参数 并 返回 一 
个 对 象 , 这 个 对 象 会 与 提供 给 组 件 的 属性 进行 合并 , 每 当 这 个 组 件 接收 到 新 属性 时 ，react-Fredux 
会 再 次 调用 这 个 函数 。 一 旦 使 用 connect 包装 了 组 件 , 就 需要 调整 组 件 内 部 使 用 属性 的 方式 ( 接 下 
来 会 介绍 action ); 不 应 该 使 用 state， 除 非 它 与 特定 的 UI 数据 相关 。 记 住 ， 虽 然 这 被 认为 是 最 佳 
实践 ， 但 并 不 意味 着 不 存在 展示 组 件 和 容器 组 件 之 间 界 限 模糊 的 情况 。 即 使 这 种 情况 很 少 ， 但 是 它 
们 的 确 存在 。 要 为 团队 和 特定 情况 做 出 最 好 的 工程 决策 。 

代码 清单 11-11 展示 了 如 何 使 用 connect 以 及 如 何 调整 Home 组 件 内 属性 的 访问 方式 并 将 
Home 组 件 转换 为 无 状态 函数 组 件 。 我 们 将 使 用 最 终 传 递 的 两 个 参数 中 的 第 一 个 来 完成 连接 : 
mapStateToProps。 这 个 函数 接收 状态 ( store 的 状态 ) 及 ownProps 这 个 额外 的 参数 ， 它 将 用 
来 传递 任何 要 传 给 容器 组 件 的 额外 属性 。 现 在 还 不 会 用 到 这 个 参数 ， 但 API 提供 它 以 防 需 要 。 





代码 清单 11-11 mapStateToProps ( src/pages/Home.js) 


import PropTypes from '‘'prop-types'; 





import React, { Component } from ‘react',; 使 用 Lodash 的 orderBy 消 
1imSOrt { GONMect } trom :Yeact-Eedu 对 帖子 排序 
import orderBy from ‘lodash/orderBy'; 数 来 对 条 
import Ad from '../components/ad/Ad'; 
import CreatePost from '../components/post/Create'; 导 人 Home 页 显 
import Post from ".. /Components/post/Post"; 示 的 组 件 
import Welcome from '../components/welcome/Welcome'; 
export class Home extends Component { 
render() { 
return 【 
<div className="home"> 
<Welcome /> 
<div> 
<CreatePost /> | 在 posts 上 调用 map 


{this.props.posts && ( 
<div className="posts"> 
{this.props.posts.map(post => ( 
POSt 


key={post.id} 
post={post} 传人 帖子 和 帖子 ID ( mapStateToProps 
/> 将 会 进一步 处 理 ) 
》 沙 和 
</ALVS 
| 
<button className="block"> 
Load more posts 
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</button> 
/UTS 
<div> 
<Ad url="https://ifelse.io/book" imageUrl1l="/static/ 
assets/ads/ria.png" /> 
<Ad url="https://ifelse.io/book" imageUrl="/static/ 
assets/ads/orly.jpg" /> 
</div> 
</div> 
); 


} 
a 
export const mapStateToProps = State => { 
const posts = orderBy(state.postIds.map(postId => state.posts [PostIQ] ) ， 
"date"'s "UESc"})? 


return {4 pastes }3 mapStateToProps 好 
5 t default connect (mapStateToP yy HH ) 数 返回 用 于 连接 组 
EXPOoOr 各 入 总 记 map atLeLOFcLOPS OILG ) 7 件 的 属性 
通过 map 得 到 posts 并 使 


用 orderBy 对 其 进行 排序 导出 连接 组 件 


现在 运行 应 用 (使 用 npm run dev )， 应 该 不 会 遇 到 任何 运行 时 错误 ， 但 也 看 不 到 任 
何 帖子 , 这 是 因为 没有 任何 action 来 做 任何 事情 。 但 如 果 打 开 React 开发 者 工具 , 应 该 能 够 
看 到 react-redux 在 创建 连接 组 件 。 注 意 connect 是 如 何 创 建 男 一 个 组 件 来 包装 传人 的 
组 件 并 提供 给 它 一 组 新 属性 的 。 在 幕后 ， 它 还 会 订阅 来 自 Redux store 的 更 新 并 将 它们 作为 
新 属性 传递 给 容器 组 件 。 图 11 lt tabbed ls 


> ‘mcs Cenacle Saiioey Natwon Polonrance Momory Appheaion Securgy Audhs Redus Roact 


性 TION Ups JOY Soatch nach Txt of /regonw/} | 
ge 和 DE hr Fm), subacribe: subscribe(t), getStote: Geroratel), ,)r 
” gt 
pr yp 1 WA 全 We so 
Ye Per set} 1 re 
vel Pat 


hi 
to ctrl 060)» ee He of)> 
We J 证 主 1 


GC Us sami" ewe > 
> lene < Welcone” 


reotepas t onsubnit bd “/Cremteront”» 
SY CUA "| 


="Nrtws?://Stelye. 40/bo0k" 4 
="httph?// itelse. +0/VooK 





图 11-4 如果 打开 React 开发 者 工具 ， 能 够 找 出 新 连接 的 容器 以 及 connect 传递 给 它 的 属性 。 注 意 
connect 函数 是 如 何 包 装 传 入 的 组 件 来 创建 新 组 件 的 
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Mark. ThOouTas “Sf 


Welcome! 


If you're here, you're probably Add location LH) 
reading React in Actinn from 

Manning Publications., This app is 

the example application that YOU 


In React in Action, You 人 il learn:; 


es。 Building a simple social app 

ea Learning about the 
fundamentals of React 

。 Buillding React apps with 
modern JavaScript {ES2015 
and beyond) 

es How Reactworks (React in 
action covers through Reacy 
16 (fiber)) 

es lImplementing 3 routing 
system from scratch 

ea Utitizing server-stde rendering 

e Testing React applications 

ea Implementing a Redux 
application architecture 


if you have any questions or 
thoughts, feel free to reach out to 
me @markthethomas on the 
Manning AUthors forum (YOU get 
access Wi the MEAPJ or on TSRT 


Rewritine Your Front 
Bnd Every Six Wowuks 





图 11-4 ”如 果 打 开 React 开发 者 工具 ， 能 够 找 出 新 连接 的 容器 以 及 connect 传递 给 它 的 属性 。 注 意 
connect 函数 是 如 何 包 装 传 入 的 组 件 来 创建 新 组 件 的 ( 续 ) 


11.2.3 将 action 绑 定 到 组 件 的 事件 处 理 器 上 


需要 让 应 用 程序 再 次 响应 用 户 的 操作 。 做 到 这 一 点 会 用 到 第 二 个 因数 : mapDispatchToProps。 
这 个 函数 的 功能 就 如 同 其 名 称 一 样 一 一 它 有 一 个 dispatch 参数 ， 就 是 要 注入 到 组 件 中 的 store 
的 dispatch 方法 。 也许 读 者 已 经 从 第 10 章 的 图 10-3 或 者 React 开发 者 工具 中 注意 到 容 仑 的 属 
性 中 有 一 个 注入 的 dispatch 方法 ; 可 以 按 原样 使 用 该 dispatch 图 数 ， 因 为 如 条 不 提供 
mapDispatchToProps 困 数 ， 它 会 自动 被 注入 到 属性 中 。 但 使 用 mapDispatchToProps 是 
有 好 处 的 ， 可 以 使 用 它 将 组 件 特定 的 action 逻辑 从 组 件 中 分 离 出 来 并 让 测试 变 得 更 容易 。 


练习 11-2 源 代码 任务 

react-redux 库 提供 了 非常 不 错 的 抽象 ， 这 些 抽象 经 经 过 二 许多 使 用 Redux 和 React 的 公司 和 个 
人 的 实战 测试 。 但 使 用 者 并 非 一 定 要 用 这 个 库 才能 让 React 与 Redux 一 起 运行 。 作 为 练习 ， 花 些 时 间 仔 
细 阅 读 react-redux 的 源 代码 。 这 不 是 建议 读者 创造 自 己 的 方式 来 连接 React 和 Redux， 而 是 应 该 能 
够 了 解 这 并 不 是 “魔法 "。 


mapDispatchToProps pp react-redeux 调用 ， 而 结果 对 象 会 被 合并 到 组 件 的 属 
性 中 去 。 它 会 被 用 来 设置 action 创建 器 并 使 其 对 组 件 可 用 。 我 们 还 会 利用 Redux 提供 的 
bindActionCreators 辅助 工具 函数 。bindRActionCcreators 将 值 为 action 创建 器 的 对 象 
不 同 之 处 在 于 每 个 action 创建 器 都 被 包 于 在 一 个 dispatch 调用 中 ， 





以 便 它 们 被 百 接 调 用 。 
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也 许 已 经 在 代码 清单 11-11 中 注意 到 使 用 的 是 React 类 而 不 是 无 状态 玉 数 组 件 。 虽 然 通 稍 会 
创建 无 状态 函数 组 件 , 但 这 种 情况 下 需要 一 种 方法 初始 化 加 载 帖 子 , 所 以 当 组 件 完 成 挂 载 时 需要 
能 够 派发 action 的 生命 周期 方法 ,一 种 解决 方式 是 将 初始 化 事件 拿 到 路 由 层 并 且 当 进入 或 离开 某 
些 路 由 时 协调 加 载 数 据 。 构 建 当 前 路 由 需 时 并 没有 考虑 生命 周期 钩子 ， 但 其 他 像 React-router 
这 样 的 路 由 确实 有 这 个 功能 。 下 一 章 将 探索 把 路 由 切换 到 React Router， 这 样 我 们 就 可 以 利用 这 
个 功能 了 。 

然后 ， 剩 下 的 是 用 mapDispatchToProps 来 拉 取 action 并 将 它们 绑 定 到 组 件 中 。 也 可 以 
创建 一 个 对 象 并 将 函数 分 配 到 任意 键 上 。 如 果 mapDispatchToProps 对 象 上 的 果 数 在 它们 和 
dispatch 调用 之 间 没 有 任何 额外 逻辑 的 话 ， 那 么 这 个 模式 可 以 让 和 直接 引用 action 变 得 更 为 容易 。 
代码 清单 11-12 展示 了 如 何 使 用 mapDispatchToProps 来 设置 action。 


代码 清单 11-12 ”使 用 mapDispatchToProps { src/containers/Home.js ) 





J 
import { createError } from '../actions/error'; 导入 这 个 组 件 需 
import { createNewPost, getPostsForPage } from '"../actions/Posts ' ; 要 的 action 
import { showComments } from '../actions/comments'; 
import Ad from '../components/ad/Ad'; 
import CreatePost from '../components/post/Create'; 
import Post from '../components/post/Post'; 
import Welcome from '../components/welcome/Welcome'; 
export class Home extends Component { 
componentDidMount () { 当 组 件 挂 载 时 加 
this.props.actions.getPostsForPage(); 载 帖 子 
} 
componentDidCatch (err, info) { i et 
this.props.actions.createError (err, info);} 如 采 组 件 中 发 生 错误， 
} 用 componentDidCatch 
render() 1 来 处 理 它 ， 并 将 错误 
return ( 派发 到 store 


<div className="home"> 
<Welcome /> 
<dliv> 
将 创建 帖子 的 <CreatePost onSubmit={this.props.actions.createNewPost} /> 
action 作 进 给 | {this.props.posts && ( 
CreatePost 组 件 <div className="posts"> 
{this.props.posts.map(post => ( 
<BPOsSt 
key={post .1id} 
post={post} 
openCommentsDrawer= 
{this.props.actions.showComments} 


通过 props 传递 


showComments action 


pp 
yr 
</div> 
) } a 
<button className="block" 传递 加 载 更 多 
onClick={this.props.actions.getNextPageOfPosts}> 帖子 的 action 


Load more posts 
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</button> 
</Aiv> 
<div> 
<Ad url="https://ifelse.io/book" imageUrl="/static/ 
assets/ads/ria.png" /> 
<Ad url="https://ifelse.io/book" imageUrl="/static/ 
assets/ads/orly.jpg" XS 


</div> 
</div> 
); 
} 
} 
// 使 用 bindActionCreators 来 绑 定 并 将 
export const mapDispatchToProps = dispatch => { action 包装 在 一 个 dispatch 调用 中 


Petwuren 
actions: bindActionCreators!l 


{ 


createNewPost, 
getPostsEorPage, 
showComments, 
createError, 
getNextPageOfPosts: getPostsForPage.bind(this, 'next') 
} 使 用 .bind0 确 保 每 次 使 用 next' 人 参数 
a 调用 getPostsForPage 


}; 
export default connect (mapStateToProps, mapDispatchToProps) (Home); 


如 此 一 来 , 已 经 将 组 件 连接 到 Redux 了 ! 就 像 早 先 提 到 的 , 没有 足够 的 篇 幅 介 绍 应 用 中 每 个 
使 用 Redux 的 组 件 的 转换 。 好 消息 是 它们 都 遵循 相同 的 模式 (用 mapStateToProps 和 
mapDispatchToProps 创建 ,用 connect 导出 )， 可 以 用 Home 页 的 相同 处 理 方 式 将 其 转换 
到 与 Redux 进行 交互 。 以 下 是 应 用 代码 中 已 经 连接 到 Redux store 的 其 他 组 件 : 

国 App 


Comments 





STC/app.]S; 





src/components/comment/Comments.]s; 


Error——src/components/error/Error.]s; 





Navigation src/components/nav/navbar.]s; 





PostActionSection src/components/post/PostActionSection.]s; 





Posts src/components/post/Posts.]s; 





Login src/pages/login.]s; 





SinglePost src/pages/pOst.]so 

随 着 所 有 这 些 组 件 都 已 集成 ， 应 用 程序 将 会 转变 为 使 用 Redux! 现在 读者 知道 如 何 添加 一 个 
Redux“ 环 ”( action 创建 器 ，reducer 处 理 action， 以 及 连接 任何 组 件 )， 要 如 何 添 加 用 户 资 料 这 
样 的 新 的 功能 ? 还 可 以 向 Letters Social 添加 其 他 什么 功能 ? 幸运 的 是 ，Letters Social 应 用 还 有 很 
多 可 以 扩展 的 地 方 和 方法 ， 可 以 通过 它们 来 尝试 使 用 Redux。 
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11.2.4 更 新 测试 


当 将 Home 组 件 转换 到 React 时 ， 会 破坏 以 前 为 它 写 的 测试 。 现 在 将 进行 修复 。 幸 运 的 是 ， 
现在 大 部 分 测试 逻辑 应 该 放 在 其 他 地 方 , 因此 如 果 可 能 , 这 些 测 试 应 该 比 它 们 以 前 更 简单 。 代 码 
清单 11-13 展示 了 Home 组 件 更 新 后 的 测试 文件 。 


代码 清单 11-13 更 新 Home 组 件 的 测试 ( src/containers/Home.test.js ) 





jest.mock ('mapbox'); 模拟 Mapbox， 因 为 CreateComment 会 尝 
import React from ‘react',，; 试 使 用 它 ， 从 react-test-renderer 中 导入 
import renderer from 'react-test-renderer',; renderer 


import { Provider } from 'react-redux'; 


import { Home, mapStateToProps, mapDispatchToProps } from 
'../../src/pages/home'; 


import configureStore from '../../src/store/configureStore'; 
import nitialSstate From "cA.. /SrcC/conetants/initialstate"; 用 一 些 帖 
子 创建 初 
const now = new Date () .getTime (); 始 状 态 
describe('Single post page', () => { 
const state = Object.assign({}, initialState, { 
BosStss, 4 
Zs 4 Contents stuff, Tikess [1 dates NOwW 市 
ls 1 Gontents "stuff, Llrkes» Tl ate now 1} 
3 
ee BostLloss [TT 这 |] 交 nm 
const store = ConfiligureStore (State) ; 建 一 个 store 


test('mapStateToProps', () => 1 2 
| 
expect (mapStateToProps (state)) .toEqual ({ 测试 ge ， 
posts: [| 断言 特定 的 状态 会 产生 
{ GOntents satuff", 1iNe8: [1 date: NW }, 正确 的 props 
{ ceontent: “stuff" jakes: [], date: now } 


})s 人 淋 [ 言 mapDispatchToProps 也 


test( mapDspatchIoProps ，() => 1{ 数 拥有 所 有 正确 属性 


const duspatcehStub = Jest, Err()s 

const mappedDispatch = mapDispatchToProps (dispatchStub); 

expect (mappedDispatch.actions.createNewPost) .toBeDefined(); 

expect (mappedDispatch.actions.getPostsForPage) .toBeDefined(); 

expect (mappedDispatch.actions.showComments) .toBeDefined(); 

expect (mappedDispatch.actions.createError) .toBeDefined(); 

expect (mappedDispatch.actions.getNextPageOfPosts) .toBeDefined (); 
}); 


test({"'should render posts', function'() {1 执行 快照 测试 来 断言 组 件 
const props = 1 的 输出 不 会 改变 
BOSts: | 


( 1 LT: Conternts "stuff": J1ikegss [1]; Hates now }, 
{ Les BSB cohtents "Stuff. 11ikess [ll Sates 0m 3 
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], 

actions: 1 

getPpostsForPage: jest.fn(), 
createNewPost: jest.fn()， 
createError: jest.fn()， 
showComments: jest.fnl() 

} . 
}; 


Const component = renderer.createl 
<Provider store={store}> 
<Homne {sDEOBS} /> 
</Provider> 


let tree = component .toJSON(); 组 件 的 输出 不 会 改变 
expect (tree) .toMatchSnapshot (); . 


关 执行 快照 测试 来 断言 


11.3 小 结 


下 面 是 本 章 中 我 们 学 到 的 主要 内 容 。 

图 ”reducer 是 Redux 用 来 基于 给 定 的 action 计算 状态 更 改 的 函数 。 

图 除了 引入 reducer 概念 ，Redux 在 很 多 方面 与 Flux 相似 ， 有 单一 的 store， 以 及 action 创 
建 锅 不 直接 分 发 action。 

国 action 包含 有 关 变 更 的 信息 。 它们 必须 有 类 型 , 但 可 以 包含 其 他 任何 信息 , store 和 reducer 
需要 用 这 些 信息 决定 状态 如 何 被 更 新 。 在 Redux 中 ， 整 个 应 用 只 有 一 个 状态 树 ; 状态 都 
存在 于 一 个 区 域 并 只 能 通过 特定 API 进行 更 新 。 

国 action 创建 器 是 函数 ， 其 返回 可 以 被 store 分 发 的 action。 使 用 某 些 中 间 件 (参见 下 一 个 
要 点 )， 可 以 创建 异步 action 创建 问 ， 这 对 调用 远程 API 之 类 的 事情 很 有 用 。 

国 Redux 人 允许 自己 编写 中 间 件 ， 中 间 件 是 将 自 定义 行为 注入 Redux 状态 管理 过 程 的 地 方 。 
中 间 件 在 reducer 被 调用 之 前 执行 并 且 容 许 执行 有 副作用 或 者 实现 应 用 的 全 局 方案 。 

图 react-redux 提供 了 绑 定 React 组 件 的 方法 ， 让 使 用 者 可 以 将 组 件 连接 到 store， 处 理 
新 props 的 传递 ， 以 及 检查 来 自 于 Redux 的 更 新 ( 当 store 变化 的 时 候 )。 

国 容 需 组 件 是 仅 处 理 数据 且 与 UI 无 关 的 组 件 〈 想 想 “ 仅 应 用 程序 数据 ”)。 

加 展示 组 件 仅 关心 能 看 到 什么 或 者 UI 相关 的 数据 ， 比 如 一 个 下 拉 菜 单 是 否 打 开 ( 想 想 “所 
能 看 到 的 东西 ”)。 

国 Redux 强制 单 向 数据 流 模式 ， 其 中 数据 更 改 由 响应 action 的 reducer 计算 并 应 用 于 store。 

在 下 一 章 中 ， 我 们 会 探索 现代 Web 应 用 程序 中 服务 端 泻 染 的 可 能 性 ， 我 们 将 开始 在 服务 端 

使 用 React。 


第 12 章 服务 夫 疹 React 与 众 威 


React Router 





本 章 主要 内 容 

React 服务 器 端 泻 染 

为 应 用 添加 服务 器 端 泻 染 的 时 机 

将 路 由 设置 转换 为 React Bomtet won 
使 用 React Router 处 理 经 过 身份 验证 的 路 由 
在 服务 器 端 泻 染 期 间 获取 数据 

在 服务 器 端 泻 染 过 程 中 使 用 Redux 


你 知道 可 以 在 浏览 器 之 外 使 用 React 吗 ? 这 是 因为 react-dom 库 的 某 些 部 分 不 需要 浏览 器 
环境 就 可 以 工作 ， 而 且 能 够 在 Node.js 运行 时 (或 几乎 任何 有 足够 语言 支持 的 JavaScript 运行 时 ) 
中 运行 。 为 了 公平 起 见 , 大 部 分 平台 无 关 的 JavaScript 都 能 够 在 浏览 喜 或 服务 需 端 运行 ,但 Node.js 
平台 上 该 取 文 件 或 加 密 等 与 IO 相关 的 特性 以 及 浏览 需 平 台 上 与 用 户 相关 的 事件 和 与 DOM 相关 
的 方面 除外 。 随 着 Node.js 平台 的 壮大 和 普及 ， 越 来 越 多 的 框架 开始 编写 时 就 考虑 到 对 服务 器 和 
浏览 右 的 文 持 。 

对 React er ms 它 通过 React DOM 的 服务 器 妆 API 来 支持 服务 器 端 泻 染 ( Server-Side 
Rendering，SSR )。 这 是 什么 意思 呢 ? SSR 通常 生成 可 以 通过 HTTP 或 其 他 协议 发 送 到 浏览 大 的 
静态 HTML seep SSR 仍旧 是 “ 演 染 ”， 只 不 过 是 在 服务 如 上 下 文中 。 应 用 程序 集成 SSR 在 某 些 
情况 下 是 有 用 的 ， 但 某 些 情况 下 却 没有 必要 。 我 们 将 在 本 章 研 究 一 些 服务 器 端 泻 染 的 历史 背景 ， 
看 看 什么 时 候 实现 它 是 有 意义 的 , 并 将 它 集成 到 Letters Social 应 用 中 , 替换 掉 第 7 章 和 第 8 章 中 
创建 的 路 由 需 , 以 便 更 好 地 文 持 SSR 并 顾及 后 续 改 进 。 我 们 将 使 用 React 来 实现 一 个 简单 版 的 服 
务 贷 端 泻 染 ， 借 此 来 熟悉 基本 概念 。 


如 何 获取 本 章 代码 人 
和 每 章 一 样 ， 读 者 可 以 去 GitHub b 仓库 检 出 源 代 码 。 如 果 想 从 头 开始 编 写本 章 代 码 ， 可 以 使 用 第 1 10 
章 和 第 11 章 的 已 有 代码 ( 如 果 跟 着 编写 了 示例 ) 或 直接 检 出 指定 章 的 代码 ( chapter-12 )。 
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运作 每 个 分 支 对 应 该 章 未 尾 的 代码 (例如 ， 分 支 chapter-12 对 应 本 章 未 尾 的 代码 )。 读者 可 以 在 
选 定 目 录 下 执行 以 下 终端 命令 之 一 来 获取 当 前 章 的 代码 
如 果 还 没有 代码 库 ， 请 输入 下 面 的 命令 来 获取 
te. ot one oiteoi tub. hemireact jn oir git 
如 果 已 经 克隆 过 代码 仓库 ， 
git checkout -chapter- 1 


如 果 你 是 从 其 他 章 来 到 这 里 的 ， 则 需要 确保 已经 正确 安装 了 所 有 的 依 吉 


‘npm install | 


12.1 什么 是 服务 器 端 泻 染 


在 研究 服务 器 端 使 用 React 之 前 , 让 我 们 先 简要 回顾 一 下 Web 应 用 程序 泻 染 的 历史 。 如 果 已 
经 熟悉 SSR 的 工作 原理 ( 也许 以 前 使 用 过 Ruby on Rails 或 Laravel 之 类 的 框架 , 或 者 已 经 了 解 了 
这 种 机 制 )， 可 以 跳 到 12.1.4 节 ， 直 接 开 始 为 应 用 程序 实现 SSR。 

在 过 去 (今天 许多 应 用 仍然 如 此 )， 只 拥有 服务 器 端 泻 染 视 图 的 应 用 才 是 普遍 情况 。 通 常 这 
些 应 用 会 创建 带 有 用 户 相 关 信 息 或 其 他 数据 的 HTML 字符 串 并 通过 HTTP 将 这 些 字 符 串 发 送 到 
浏览 器 。 虽 然 情况 最 终 会 有 所 好 转 ,， 但 一 开始 甚至 服务 器 端 也 很 原始 。 开 发 人 员 创 建 简 单 的 服务 
个 妆 脚 本 ， 这 些 脚本 手动 将 HTML 字符 串 的 各 个 部 分 连接 在 一 起 ， 然 后 将 形式 的 这 个 整体 作为 
响应 发 送出 去 。 这 种 方法 虽然 奏效 , 但 让 事情 变 得 更 为 困难 ， en 
耗 时 而 且 可 能 很 难 更 改 。 随 着 时 间 的 推移 , 一 些 框架 甚至 语言 被 开发 或 创建 出 来 以 使 开发 人 
够 更 好 地 构建 主要 在 服务 器 端 演 染 的 用 户 界面 。 

图 12-1 展示 了 这 个 过 程 的 大 致 情况 。 其 基本 思想 是 , 服务 器 使 用 动态 生成 的 HTML 响应 来 自 浏 览 
需 的 请 求 , 这 些 HTML 以 某 种 方式 包含 了 特定 于 请 求 用 户 的 信息 。ERB 模板 示例 展示 了 工程 师 在 创建 
HTML 时 要 处 理 的 内 容 。 如 果 你 之 前 接触 过 Nodejs 社区 ， 可 能 会 熟悉 Pug ( 别名 Jade ) 模板 语言 。 


不 s 例 : Ruby on Rails S0.2 中 默认 未 处 理 的 application.html erb 文 件 


~ <IDOC TYPE html> 
<html> 
<head> 
<title>RailsTemp</title> 
<%= csrf_meta_ tags %> 


服务 器 





ee bolinke track : reload 5%> 

<%= javascript_include_tag | 
gata—turbolinks—track + reload ? 

</head> 





L 
1 
| 
= stylesheet link_tag application ， media: all, 1 
1 


! 数据 查找 /计算 (基于 来 
| 自 会 话 cookie、 查 询 参 
, 数 或 其 他 源 的 信息 ) 







<bodys ' 
<%= yeld %> | 
He 
< > 2 
用 计算 得 到 的 数 deer 
据 “ 填 充 ” 的 服 模板 会 被 处 理 并 用 合适 的 数据 填充 ， 之 后 提供 出 来 用 于 发 送 给 
务 器 响应 HTML 客户 端 


sw 
a 
pa A 







浏览 器 请 求 
GET https://example.com/profile 


12-1 ”服务 器 端 泻 染 的 简单 概览 
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Ruby on Rails、WordPress ( 基于 PHP 的 内 容 管 理 框 架 ) 以 及 其 他 框架 被 开发 并 发 展 起 来 ， 

以 满足 用 这 种 方式 构建 应 用 的 需求 。 这 种 以 服务 器 为 中 心 的 方式 运作 得 很 好 ,现在 仍然 如 此 。 但 
随 着 客户 六 JavaScript 变 得 更 加 健壮 以 及 浏览 硕 变 得 更 加 强大 ， 开 发 人 员 终于 开始 不 再 只 是 使 用 
JavaScript 为 应 用 程序 添加 基本 交互 ,而 是 开始 用 JavaScript 生成 和 更 新 带 有 动态 数据 的 界面 。 这 
意味 着 服务 器 更 少 地 用 于 模板 输出 ， 而 更 多 地 用 作 数 据 源 。 因 此 ， 你 会 发 现 许多 应 用 程序 ( 如 我 
们 的 应 用 程序 ) 使 用 健壮 的 客户 端 应 用 程序 来 管理 UI， 并 使 用 远程 API ( 通常 是 REST ) 提供 动 
态 数 据 。 这 是 我 们 在 本 书 中 到 目前 为 止 一 直 在 使 用 的 范式 。 但 本 章 将 稍 作 改变 , 混合 使 用 服务 器 
闹 泻 染 模 式 和 客户 问 泻 染 模式 。 下 一 节 将 展示 服务 此 端 演 染 的 一 些 更 为 具体 的 示例 。 图 12-2 展 
示 了 这 种 设置 的 示例 ， 与 图 12-1 进行 对 比 。 


服务 器 






ee ee Ee ee 


' - 提供 HTML + CSS + JS (如 果 不 是 通过 cdn 的 话 ) 
! - REST 风 格 的 API 提 供 JSON 
! - 与 数据 库 交 互 ， 其 他 常规 服务 器 任务 


We te ee a 







\ 
1 
| 









-> 
: 
: 
| 





浏览 器 请 求 | 服务 器 响应 Ea 

GET https://example.com/profile | | HTML， 额 外 资产 (JS、CSS) | ( jo 
| : JSON (API 交 互 ) : | 

浏览 器 i : 


m 本 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 二 人 


- 泻 染 ， 管 理 UI | | 
- 发 起 后 续 API 请 求 





ern 


- (通常 ) 处 理 客户 端 路 由 


Vi ii i wi Ui dn i Gn ,DY ny i i i ei i dd niin “iin end i i i i din ni pi 


12-2 ” 随 着 浏览 器 和 JavaScript 语言 的 发 展 ( 有 时 发 展 速度 很 慢 )， 客 户 端 JavaScript 承担 了 更 多 的 责 
任 。 如 果 回 头 查看 图 12-1 并 将 其 与 本 图 进行 比较 ， 你 会 发 现 它们 正在 完成 相同 的 基本 任务 
( 获取 或 计算 数据 ， 并 向 用 户 显示 )， 但 客户 端 和 服务 器 又 分 别 承担 了 不 同 的 责任 


深入 服务 器 端 泻 染 


在 开始 实现 SSR 之 前 ， 我 们 将 继续 在 非 React 的 上 下 文中 介绍 SSR 的 更 多 方面 ， 以 便 开始 
将 它 构 建 到 应 用 程序 中 时 ， 工 作 更 有 意义 。 来 看 一 个 使 用 ERB ( Embeded Ruby ) 的 SSR 示例 。 
我 们 在 图 12-1 中 看 到 的 ERB( Embedded Ruby ) 是 Ruby 编程 语言 的 一 个 特性 , 可 以 用 来 为 HTML 
(或 其 他 类 型 的 文本 ， 如 用 于 RSS feed 的 XML ) 创建 模板 。 如 果 对 此 有 兴趣 ， 可 以 了 解 更 多 关 
于 ERB 和 Ruby on Rails 的 信息 。 

许多 Ruby on Rails 应 用 程序 将 合并 使 用 ERB 模板 生成 的 视图 。 框 架 将 读 取 开发 人 员 创 建 
的 .erb 模板 文件 并 使 用 来 目 服 务 需 或 其 他 地 方 的 数据 填充 这 些 文件 。 填 充 数据 后 ， 生 成 的 文本 将 
被 发 送 到 用 户 的 浏览 硕 。 使 HTML 视图 模板 化 的 能 力 与 JSX 类 似 ， 只 是 语法 和 语义 不 同 。React 
会 创建 和 管理 UI， 而 像 ERB 这 样 的 模板 方法 只 涉及 “创建 ”部 分 。 代 码 清单 12-1 展示 了 ERB 
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文件 的 简单 示例 , 以 演示 在 服务 器 端 泻 染 的 应 用 程序 中 经 常 使 用 的 这 类 模板 。 除 了 语法 上 的 差异 ， 
ERB 与 惯用 的 其 他 模板 语言 (如 Handlebars、Jade、EJS 甚至 是 React ) 没有 太 大 不 同 。 这 些 模板 
语言 的 很 大 部 分 都 允许 使 用 编程 语言 中 可 用 的 许多 基本 结构 , 如 循环 、 变 量 访问 等 , React 的 JSX 
也 不 例外 。 


代码 清单 12-1 ”ERB 模板 





<hl>Listing Books</h1l> 
<table> 
<tE> 
<th>Title</th> 
<th>Summary</th> 
<th></th> 
<th></th> 
<th>< /thS 
SS 巧 芝 过 
< 当 books .each do |book| $%> #A 
< 工人 > 
<td><%= book .title %></td> 
<td><%= book .content %></td> 
<td><%= link to "Show", lBbook %></td> 
<ta><%= link to "Edit", edit book pathy(book) %></td> 
<td><%= link to "Remove", book, method: :delete, data: { confirm: "Are 
YOU Sure?™ } %></tad> 
</tr> 
< 和 end 和 > 
</table> 
<br> 
<$%= link to "New book", new book path 和 > 


快速 看 一 下 服务 器 端 泻 染 过 程 中 发 送 给 浏览 器 的 内 容 , 这 可 能 对 了 解 我 们 想 要 构建 的 机 制 有 
所 帮助 。 服 务 器 处 理 了 类 似 代码 清单 12-1 中 的 模板 后 ， 便 回 浏 览 器 发 送 文本 响应 ， 结 果 如 代码 
清单 12-2 所 示 ， 它 展示 了 HTTP 响应 ( 版 本 1/1.1 ) 的 文本 表示 形式 。 这 与 我 们 在 服务 器 上 泻 染 
Letters Social 应 用 程序 时 发 送 给 浏览 句 的 内 容 非常 相似 。 

我 用 了 一 个 第 用 的 命令 行 工 具 cURL 来 从 http://example.com 获取 Web 页 面 ， 这 样 我 们 就 可 
以 看 到 原始 的 HTTP 请 求 。 你 的 电脑 上 可 能 已 经 安装 了 cURL， 如 果 没 有 ， 需 要 先 安装 一 下 。 代 
码 清 单 12-2 展示 了 运行 curl -v https://example.com 后 的 “原始 ”HTTP 响应 输出 示例 。 
简洁 起 见 ， 我 省 略 了 一 些 内 容 ， 但 保留 了 cURL 的 > 和 < 符号 以 表示 发 出 (> ) 和 传人 (< ) 的 消 
县 。 如 果 不 想 使 用 cURL ， 可 以 在 浏览 器 中 访问 http://example.com 并 打开 开发 者 工具 。Chrome、 
Firefox 和 Edge 的 开发 者 工具 都 有 一 个 网 络 标签 ， 可 以 检查 HTIP 请 求 。 


代码 清单 12-2 HTTP 请求 示例 





RE 

> Host: example .com 使 用 cURL 发 送 
> User-Agent:r,curl/7.51.0 到 服务 器 的 请 求 
> AGCept: */* 
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< HITPALsL 200. OK 
< Cache-Control: max-age=604800 啊 应 头 提供 了 诸如 响应 状态 
< Content-Type: text/html 和 其 他 一 些 有 用 的 信息 ( 缓存 
< Date: Mon, 01 May 2017 16:34:13 GMT 控制 、 过 期 等 ) 
< Etag: "3353906710651+gzip+ident” 
< Expires: Mon, 08 May 2017 26:34:13 GMT 
< Tast~Modltieds: Fris 09 Bug 2013 23554335, GMT 
< Server: ECS (rhv/81A7) 响应 头 提 供 了 诸如 响应 状态 
< Vary: Accept-Encoding 和 其 他 一 些 有 用 的 信息 (缓存 
< X=Caches: HIT 控制 、 过 期 等 ) 
< Content-Length: 1270 
< 
1 
pe rir 啊 应 体 ， 即 将 要 用 React 


<head> | 生成 的 东西 


<title>Example Domain</title> 


<meta charset="utf-8" /> 

<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=]1" /> 
</head> 


<body> 
<div> 
<hl>Example Domain</hl1> 
<p>This domain is established to be used for illustrative examples in 
documents. You may use this 
domain in examples without prior coordination or asking for 
permission.</p> 
<p><a href="http://www.iana.org/domains/example">More 
information...</a></p> 
</div> 
</body> 
</html> 


到 本 章 结 束 时 ， 读 者 可 能 期 望 其 应 用 程序 的 服务 顺 部 分 能 够 创建 与 代码 清单 12-2 相同 的 结 
采 ( 当然 ， 特 定 于 应 用 )。 和 希望 到 目前 为 止 ， 服务 右 端 演 染 的 基本 思想 是 有 意义 的 。 在 接 下 来 的 
两 节 中 ， 我们 将 探讨 何 时 将 此 功能 构建 到 应 用 中 是 有 意义 的 ， 而 何 时 是 没有 意义 的 。 


12.2 为 什么 在 服务 器 上 泻 染 


为 什么 要 做 SSR 呢 ? 基于 使 用 的 情况 ， 可 能 会 有 一 些 非 常 有 说 服 力 的 理由 。 例 如 ， 有 一 些 
坊间 证 据 表 明 , 服务 器 端 泻 染 的 应 用 在 被 搜索 引擎 索引 和 爬 取 时 表现 得 更 好 。 虽 然 像 谷歌 这 样 的 
大 型 搜索 引擎 似乎 可 以 在 服务 器 上 执行 或 至 少 模拟 JavaScript 和 DOM, 但 似乎 那些 不 使 用 DOM 
呈现 动态 内 容 的 站 点 表现 得 更 好 。 很 难 确定 SSR 和 非 SSR 应 用 对 搜索 引擎 优化 (SEO ) 的 确切 
影响 ,因为 谷歌 和 其 他 公司 的 网 站 排名 算法 都 是 严格 保密 的 , 但 至 少 有 来 自 业 内 人 士 和 团队 的 坊 
间 证 据 表 明 SSR 可 以 产生 积极 的 影响 。 因 此 ， 如 果 有 一 个 非常 依赖 在 搜索 引擎 结果 中 进行 展示 
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的 高 度 公 开 的 应 用 程序 ， 那 么 除了 其 他 所 有 SEO 优化 ， 还 可 以 考虑 使 用 SSR 来 提升 候 虫 程序 的 
友好 度 。 
本 书 中 , 我 们 一 直 在 开发 一 款 需 要 交互 并 允许 用 户 动态 创建 内 容 的 应 用 程序 , 但 并 不 是 每 个 
应 用 都 有 这 些 要求 。 如 果 只 想 要 React 的 静态 方面 ， 那 么 可 以 很 轻松 地 使 用 React-DOM 的 静态 
泻 染 功能 来 创建 静态 页 面 生 成 希 或 模板 库 。 
优化 用 户 体验 可 能 是 需要 在 服务 器 上 泻 染 的 另 一 个 原因 。 如果 应 用 程序 需要 尽 可 能 快 地 加 用 
户 显 示 内 容 , 那么 在 服务 器 上 泻 染 可 能 比 等 待 客户 端 泻 染 更 快 。 例 如 ， 当 应 用 程序 很 大 程度 上 依 
赖 于 向 用 户 显示 广告 或 其 他 静态 付费 内 容 ， 并 且 资 源 不 是 很 大 时 ， 就 是 一 个 典型 场景 。 如 果 布 望 
在 不 带 交 互 的 情况 下 快速 显示 内 容 ， 那 么 可 能 会 更 关心 “ 白 屏 时 间 ”， 即 用 户 第 一 次 能 够 在 浏览 
大 中 看 到 内 容 所 用 的 时 间 。 
白 屏 时 间 是 可 以 用 来 判断 浏览 絮 泻 染 应 用 程序 的 性 能 的 众多 指标 之 一 。 男 一 个 指标 是 感知 速 
度 指 数 (通常 仅 为 速度 指数 ) ， 它 是 通过 记录 页 面 在 一 段 时 间 内 完成 了 多 少 泻 染 量 来 计算 的 。 
浏览 需 会 在 页 面 加 载 时 录制 视频 并 确定 在 给 定 的 时 间 间 隅 内 页 面 加 载 的 捍 分 比 。 这 个 指标 总 体 上 
对 于 理解 给 定 页 面相 对 于 用 户 的 加 载 速度 非常 有 用 。 SSR 通过 在 加 载 过 程 的 早期 让 网 站 有 更 多 东 
西 可 以 被 浏览 右 泻 染 来 潜在 加 快感 知 速度 。 
大 部 分 应 用 程序 会 从 更 快 的 感知 速度 和 更 短 的 白 屏 时 间 中 获 益 。 但 在 其 他 情况 下 ， 开 发 
者 可 能 对 尽快 各 用 户 显 示 内 容 这 件 事 不 太 关 心 ， 他 们 更 希望 让 用 户 尽 快 使 用 应 用 程序 。 如 有 果 
应 用 程序 是 高 度 交 互 的 定 应 用 ， 如 Basecamp 或 Asana， 那么 可 交互 时 间 ( time to interactive， 
TTI)( 直到 用 户 能 够 与 应 用 或 页 面 进行 交互 所 花费 的 时 间 ) 可 能 更 为 重要 。 对 于 这 些 应 用 程 
序 ，SSR 可 能 没有 意义 ， 因 为 它们 不 是 公开 访问 的 ， 而 且 与 快速 问 用 户 展示 内 容 相 比 它们 更 
依赖 交互 。 
让 我 们 通过 几 个 应 用 程序 来 了 解 如 何 将 TTI 纳入 进来 。 
国 Basecamp (项 目 管理 应 用 ): 用 户 布 望 能 搜索 问题 ， 更 新 符 办 事项 ， 查 看 项 目 状 态 。 这 
种 情况 下 , 会 想 要 优化 应 用 让 其 尽 可 能 快 地 加 载 JavaScript 文件 而 不 是 尽快 回 用 户 展现 
内 容 。 
国 Medium (博客 /写作 应 用 ): 用 户 想 要 尽 可 能 快 地 阅读 和 浏览 文 曹 。 这 些 功能 并 不 取决 于 
应 用 的 交互 性 ， 所 以 这 种 情况 下 我 们 会 想 要 优化 日 屏 时 间 。 
考虑 SSR 时 , 可 能 还 需要 权 衔 服务 融 端 泻 染 和 客户 端 泻 染 的 资源 使 用 。 如 有 果 正 在 泻 染 大 量 
数据 〈 可 能 是 一 个 数 千 行 的 在 线 电 子 表 格 )， 在 服务 硕 上 泻 染 可 能 需要 回 浏 览 硕 发 送 更 大 的 初 
始 答 载 。 依 次 地 ， 这 可 能 意味 着 更 长 的 TTI， 更 长 的 TTI 可 能 会 妨碍 用 户 的 使 用 ， 并 且 可 能 使 
用 更 多 的 服务 器 资源 。 但 假如 在 应 用 程序 加 载 后 获取 相同 信息 量 的 JSON 格式 数据 可 能 带 来 更 
小 的 和 谷 载 并 获得 更 好 的 用 户 体 验 。 


G@ 虽然 作者 在 原文 将 perceptual speed index 和 speed index 认定 为 一 种 指标 ,但 实际 上 这 是 两 种 指标 ， 其 统计 
方式 并 不 相同 。 前 者 采用 了 Structural Similarity Image Metric 算法 ,后 者 则 采用 了 Mean Pixel-Histogram 
Difference 算法 ， 其 中 Perceptual Speed Index 的 统计 结果 更 贴近 用 户 的 真实 感受 。 一 一 译 者 注 
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企业 级 应 用 与 消费 级 应 用 中 的 服务 器 端 泻 染 | : Oe 

你 可 能 会 觉得 我 们 在 本 章 对 服务 器 端 泻 染 的 讨论 只 是 永远 不 会 用 到 的 理论 上 的 东西 。 但 我 相信 你 会 
发 现 服务 器 端 泻 染 比 想象 中 更 为 普遍 ， 并 且 是 很 多 团队 会 切实 考虑 的 一 个 选项 。 从 我 自己 的 经 历 和 我 遇 
到 的 其 他 工程 师 的 经 历来 看 ， 这 一 点 确实 是 正确 性 的 。 我 曾经 做 过 面向 公众 的 消费 级 产品 和 封闭 的 企业 
级 应 用 ， 并 有 机 会 看 到 在 不 同业 务 场景 中 考虑 服务 器 端 泻 染 。 在 这 两 种 情况 中 ， 我 们 都 希望 为 用 户 做 到 
最 好 ， 并 将 服务 器 端 泻 染 作为 一 种 选择 。 

在 企业 级 应 用 中 ， 我 们 应 对 的 用 户 希望 尽 可 能 快 地 与 应 用 交互 ， 而 不 只 二 记过 时 亲 ， 我 们 下 上 加 
供 可 能 包含 数 百 甚至 数 千 行 金融 数据 的 页 面 ( 这 可 能 会 抵消 服务 器 端 泻 染 所 获得 的 收益 )。 应 用 程序 由 几 
个 较 小 的 应 用 程序 组 成 ， 我 们 基于 给 定时 间 在 使 用 哪个 应 用 来 提供 不 同 的 JavaScript 包 。 然 而 ， 让 问题 
变 得 更 复杂 的 是 ， 数 据 完整 性 和 安全 性 是 我 们 最 为 关心 的 问题 ， 所 以 服务 器 端 言 染 可 能 会 引入 一 个 从 安 
全 角度 进行 防护 和 评估 的 新 领域 。 

这 些 因素 使 服务 器 端 泻 染 “值得 拥有 "， 这 在 它 被 重新 计算 时 可 以 节省 一 些 未 来 的 时 间 。 我 们 发 现 还 
可 以 做 些 其 他 事情 来 帮助 用 户 ， 如 提高 服务 器 性 能 ， 优 化 应 用 资源 服务 ， 以 及 将 客户 端的 数据 获取 延迟 
到 只 在 需要 时 进行 . ; 有趣 的 是 ， 人 们 对 不 同类 型 的 应 用 有 着 不 同 的 期 望 。 类 似 Facebook、Twitter 和 
Amazon 这 样 的 消费 级 应 用 都 在 争夺 用 户 ， 这 些 用 户 有 着 非常 多 的 选择 ， 因 此 这 类 应 用 会 在 许多 方面 与 
其 他 应 用 直接 竞争 。 根 据 我 的 经 验 ， 企 业 用 户 对 他 们 在 工作 中 使 用 的 应 用 程序 的 期 望 往往 略 有 不 同 。 速 
度 当然 非常 重要 ， 但 稳定 性 、 可 靠 性 、 明 确 性 和 其 他 重要 方面 对 企业 级 应 用 来 说 也 同样 重要 。 因 此 ， 对 
工程 团队 来 说 ,在 这 些 维度 上 进行 优化 而 不 是 花费 同样 的 时 间 优 化 一 个 影响 较 小 的 指标 是 合理 的 。 当 然 ， 
情况 并 非 总 是 如 此 ， 但 从 我 参与 的 一 些 项 目 来 看 确实 是 这 样 的 。 

我 参与 的 一 些 其 他 项 目的 需求 却 大 不 相同 。 其 中 一 个 应 用 来 自 电子 商务 领域 。 因 为 白 屏 时 间 和 SEO 
的 考量 对 其 极为 重要 ， 所 以 服务 器 端 泻 染 就 非常 有 意义 了 。 我 们 努力 减 小 资源 包 的 大 小 并 尽 可 能 快 地 向 
用 户 显示 内 容 。 任 何 迟缓 的 表现 都 有 可 能 阻止 用 户 继续 购物 。 这 些 应 用 程序 也 与 营销 工作 紧密 结合 ， 因 
此 确保 SEO 的 稳定 性 能 是 重 中 之 重 。 0 : 

还 有 一 些 其 他 的 案例 可 以 应 用 服务 器 端 泻 染 ， 但 我 希望 这 两 个 简单 的 例子 能 帮助 我 们 理解 本 章 讨论 
的 内 容 的 实用 性 。 

开发 人 员 大 可 不 必 在 SSR 实现 上 孤注一掷。 如 果 必 须 泻 染 一 个 几 千 行 的 电子 表单 ， 应 该 让 
客户 端 来 进行 这 方面 的 泻 染 , 而 在 服务 器 上 泻 染 注册 和 登录 页 面 可 能 更 有 意义 ,因为 这 些 页 面 更 
小 , 更 依赖 于 白 屏 时 间 而 不 是 及 时 可 交互 性 。 开 发 人 员 还 可 以 选择 在 服务 器 上 尝 染 页 面 的 某 些 部 
分 ， 但 允许 客户 端 来 处 理 所 有 未 来 的 数据 获取 和 泻 染 。 如 果 有 兴趣 了 解 更 多 关于 Web 性 能 的 知 
识 ， 最 好 从 谷歌 的 Web 基础 指南 开始 。 


12.3 可 能 并 不 需要 SSR 
尽管 SSR 有 一 些 潜在 的 好 处 ,但 你 应 该 只 在 真正 需要 的 时 候 才 把 它 构建 到 应 用 中 ， 因 为 它 会 引 
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人 和信 显著 的 复杂 性 ( 取决 于 其 集成 的 深度 ), 在 本 章 我 们 将 实现 一 个 基本 的 最 简 版 SSR ( 服务 器 端 泻 染 ) 
来 熟悉 概念 ， 但 要 构建 能 够 处 理 SSR 所 有 细微 差别 的 健壮 的 专门 实现 ， 则 要 求 深度 的 技术 参与 。 
至 少 有 几 个 原因 可 以 解释 为 什么 集成 服务 需 端 泻 染 会 增加 复杂 度 。 下 面 是 其 中 一 些 。 
图 需要 以 某 种 方式 同步 服务 奋 与 客户 端 ， 以 便 客户 端 了 解 其 何 时 接管 。 这 可 能 涉及 设置 
HTML、 事 件 处 理 程序 以 及 客户 端 可 能 需要 的 更 多 内 容 。 身 份 验证 的 实现 也 需要 考虑 来 
自 服务 右 或 客户 端的 请 求 ， 这 些 请 求 可 能 需要 做 些 更 改 。 
国 客户 疹 和 服务 需 在 不 同 的 范式 内 运作 ， 这 些 范 式 并 非 总 是 那么 容易 相互 映射 (例如 ， 没 
有 DOM， 没 有 文件 系统 ， 等 等 )。 必 须 协 调 切 换 和 泻 染 ， 并 确保 没有 使 用 或 者 已 经 正确 
处 理 了 依赖 浏览 恬 环 境 的 组 件 。 
国 尽管 有 一 些 例 外 存在 , React ( 以 及 任何 JavaScript ) 非常 可 靠 地 运行 在 Node.js 运行 时 上 。 
这 可 能 会 将 客户 端 和 泻 染 它 的 服务 需 耦 合 在 一 起 ， 因 为 它们 现在 都 需要 文 持 JavaScript。 
这 可 能 是 一 件 好 事 ， 但 它 的 确 意味 春 你 正比 正常 情况 下 更 多 地 将 上 自己 与 JavaScript 语言 / 
平台 绑 在 一 起 。 

国 微调 SSR 可 能 需要 对 客户 端 和 服务 需 进 行 专门 调 优 。 性 能 提升 通常 是 通过 关注 特定 功能 

的 小 而 渐进 的 提升 来 实现 的 ， 且 几乎 总 是 涉及 权衡 。 这 有 时 意味 着 进行 快速 更 改 时 灵活 
性 更 差 以 及 维护 过 程 更 复杂 。 服 务 需 端 泻 染 为 这 个 过 程 又 增加 了 一 个 方面 。 

总 的 来 说 ， 这 里 谨慎 的 主要 原因 是 “ 仅 用 所 需 ” 这 样 的 观念 。 我 不 希望 读者 认为 如 果 不 使 用 
SSR，React 应 用 就 不 完整 或 者 “不 够 React”。 最 好 的 工程 决策 过 程 包含 对 所 涉及 权衡 的 全 面 思 
考 (不 只 是 其 他 人 用 什么 或 者 流行 什么 ! ), 这 一 观点 在 这 里 也 适用 。 一 个 例子 可 能 是 作为 个 人 副 
业 项 目 正 在 编写 一 个 简单 的 博客 应 用 程序 。 事 实 上 ， 如 果 不 是 Netflix， 就 不 需要 Netflix 的 基础 
设施 和 编排 技术 。 即 便 如 此 ， 也 不 是 所 有 大 公司 都 做 SSR。 编 写本 书 时 ， 其 至 Instagram 似乎 都 
没有 用 React 做 SSR， 而 他 们 在 React 上 投入 巨大 。 仅 用 所 需 。 
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我 们 已 经 徐 要 地 了 解 了 服务 硕 端 泻 染 的 一 些 权 衡 , 现在 就 可 以 开始 深入 人 研究 并 了 解 如 何 使 用 
React 实现 服务 器 端 泻 染 。 让 我 们 从 要 用 的 React API 开始 。ReactDOMServer (通过 require 
('react-dom/server') 或 ijmport ReactDOM from 'react-dom/server' 来 访问 ) 暴 
露 了 4 个 重要 方法 ， 可 以 用 于 为 组 件 生成 初始 HTML: 

国 renderToString; 

国 renderToStaticMarkup; 

国 renderToNodeStreanm; 

国 renderToStaticNodeStream,。 

依次 来 看 一 下 这 些 方法 。 

首先 ， 我 们 有 ReactDOMServer.renderToString。renderToString 所 做 的 正如 其 
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名 : 它 接 收 一 个 React 元 素 ， 并 根据 调用 该 方法 时 存在 的 初始 状态 和 属性 ( 默认 值 或 传递 进来 的 
值 ) 从 组 件 生成 对 应 的 HTML 标记 。 如 前 面 几 章 所 了 解 的 ，React 元 素 是 React 应 用 最 小 的 构建 
单元 。 它 们 是 用 React .createElement (或 者 更 通常 地 说 ， 由 JSX ) 创建 的 ， 而 且 它 们 要 么 
从 字符 串 类 型 创建 ， 或 是 从 React 组 件 类 创建 。 这 个 方法 看 起 来 像 这 样 : 


ReactDOMServer.renderToString (element) string 


当 在 服务 硕 上 演 染 时 ， 就 像 往常 一 样 使 用 组 件 和 传递 属性 。 到 目前 为 止 ， 在 服务 器 上 使 用 React 
与 以 往 最 主要 的 区 别 是 ， 在 服务 器 上 使 用 React 缺乏 DOM 和 浏览 器 环境 。 这 意味 着 ，React 不 会 
全 人 这 样 的 生 售 周期 方法 ， 也 不 ed dd DOM 的 和 性 - 


A 者 “ 必 备 ”的 特性 
He 有 人 雪人 业 级 有 ; ne: 












电子 商务 应 采 8 
昌 ”视频 托管 平台 ee Ws : | 7 
ReactDOM. es ed oh 会 做 与 renderToString 一样 的 事情 , 但 不 会 附加 

任何 React 在 客户 端 “接管” 时 需要 的 额外 的 DOM 属性 。 当 想 要 进行 基本 的 模板 或 静态 站 点 的 生 

成 而 不 需要 任何 额外 的 属性 时 ， 这 非常 有 用 。renderToStaticMarkup 与 renderToString 

几乎 完全 相同 : 
ReactDOMServer.renderToStaticMarkup (element) string 


在 此 之 后 我 们 将 不 再 使 用 renderToStaticMarkup, 但 是 了 解 了 如 何 使 用 React 来 实现 
SSR， 在 将 来 的 项 目 中 使 用 它 就 应 该 很 简单 了 。 

你 可 能 已 经 注意 到 ， 前 两 个 方法 与 renderToNodeStream 和 renderToStaticNodeStream 
存在 明显 的 互补 关系 。 你 猜 对 了 。 这 两 个 方法 与 前 两 个 方法 基本 相同 ， 只 是 它们 利用 了 Node 的 
Streams API， 并 且 是 在 React 16 中 与 Fiber Reconciler 及 许多 其 他 更 改 一 起 被 引入 的 。Streams 通 
第 在 Node.js 中 使 用 ， 如 果 你 用 过 Node 可 能 会 对 其 有 所 了 解 。 如 果 没 有 用 过 ， 也 没有 关系 ,我 
们 的 目的 在 于 , 这 些 基于 流 的 方法 是 异步 的 ,这 使 它们 相对 于 其 同步 方法 具有 显著 的 优势 。 有 段 
时 间 ，React 服务 右 端 演 染 的 一 个 小 缺点 就 是 这 些 方法 是 同步 的 。 如 果 应 用 需要 渲染 包含 许多 组 
件 的 复杂 页 面 ， 这 对 应 用 无 疑 是 个 挑战 。 在 本 章 稍 后 , 在 了 解 将 服务 器 端 数据 获取 作为 服务 器 端 
泻 染 的 一 部 分 时 ， 我 们 会 探讨 这 些 方法 。 

对 可 用 的 API 方法 有 了 一 定 了 解 之 后 ,我 们 就 可 以 专注 于 renderToString 了 。RenderTo- 
String 会 生成 React 可 以 在 客户 端 处 理 和 使 用 的 代码 。React-DOM 还 有 另外 一 个 方法 hydrate， 
其 工作 原理 与 我 们 常用 的 常规 的 render 方法 几乎 一 模 一 样 ， 主 要 区 别 在 于 hydrate 专门 处 理 
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服务 器 端 泻 染 生成 的 标记 内 容 。 

如 果 在 一 个 节点 上 (该 节点 已 经 有 了 React-DOM 在 服务 器 上 生成 的 标记 内 容 ) 调用 
ReactDOM.hyqrate () , 那么 React 会 保留 现 有 的 HTML 标记 并 比 以 往 少 做 些 工作 。 这 通常 意 
味 着 在 初始 启动 时 ,除了 更 快 的 初始 加 载 ( 取决 于 发 送 了 多 少数 据 ， 以 及 服务 器 负载 、 网 络 、 天 
气 等 其 他 因素 )，React 要 做 的 工作 要 少 得 多 。 我 不 会 再 强调 这 一 点 ， 但 请 记 住 ，SSR 不 是 魔法 ， 
如 果 做 的 事情 是 加 载 大 型 JavaScript 文件 、 不 切 分 代码 或 违背 其 他 最 佳 实践 ， 会 轻易 抵消 任何 性 
能 改进 。 

到 目前 为 止 ， 还 没有 接触 任何 服务 需 文 件 。 本 草 范 围 有 限 ， 服 务 天 编程 超出 了 本 书 的 范围 ， 
因此 我 们 不 会 太 多 涉及 Node.js 运行 时 或 Web 服务 需 编 程 范 式 。 如 果 想 了 解 更 多 关于 Node 和 服 
务 贷 闪 编 程 的 内 容 ， 去 看 看 Alex Young 等 人 编写 的 《Node.js 实战 (第 2 版 )》。 

我 们 将 通过 关注 需要 在 服务 器 上 进行 的 更 改 来 开始 SSR 的 构建 。 代 码 清单 12-3 展示 了 主 应 
用 程序 服务 器 代码 ， 这 是 在 让 其 与 React 协同 工作 之 前 的 样子 。 我 已 经 包含 了 所 有 东西 ， 以 便 你 
对 这 有 段 代码 做 什么 有 个 大 概 感受 ,大 多 数 代码 都 是 简单 的 Express 应 用 可 能 会 用 到 的 样板 中 间 件 ， 
但 它们 中 的 大 多 数 与 SSR 没有 直接 关系 。 图 12-3 将 代码 清单 12-3 中 的 代码 置 于 本 章 到 目前 所 讨 
论 的 演 染 方法 的 上 下 文中 。 


服务 器 
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| 响应 处 理 名 | 
















! - 解析 传 入 的 请 求 ，- 执行 特定 路 由 的 逻辑 
1 - 基本 安全 补丁 1 - 确定 最 终 响应 / 
。 - 处理 全 局 日 志 ' 





! -~ 压缩 
- 处 理 未 找到 的 情况 


ss el i i i i td td a i i a 





浏览 器 请 求 
GET http: //localhost: 
3000/<route-name> 


服务 右 响 应 
(还 没有 演 染 ) 


图 12-3 ”如 代码 清单 12-3 所 示 ， 这 是 服务 器 代码 所 做 的 基本 工作 。 它 设置 好 服务 器 ， 添 加 一 些 样板 
中 间 件 ， 然 后 提供 一 个 精简 的 HTML 文件 ， 其 会 依次 下 载 应 用 文件 


代码 清单 12-3 展示 了 应 用 程序 的 ( 基本 ) 服务 器 设置 。 当 将 其 放 人 本 章 讨论 的 SSR 方法 的 
上 下 文中 时 , 它 符合 以 客户 端 为 中 心 的 范式 。 在 这 种 方式 中 ,服务 器 通 浓 只 发 送 一 个 不 包含 预先 
演 染 内 容 的 HTML 文件 。 构建 工具 目前 负责 生成 和 提供 HTML 文件 。 该 文件 包含 对 脚本 的 引用 ， 
这 些 脚 本 将 下 载 并 执行 应 用 的 泻 染 和 管理 工作 ， 但 服务 器 上 没有 做 任何 演 染 ( 目前 还 没有 ! )。 


代码 清单 12-3 ”从 服务 器 开始 ( server/server.js ) 


import 
import 
import 
import 
i.mpOrt 
imBort 
ijmport 
import 
import 
import 
import 
import 
import 
import 


limport 


const app = 
const backend = 


app. 
app. 
app. 
app. 
app 
app. 
app 
app. 
app 
app. 
app 
app. 


app. 
app. 


use(logger(, PRODUCTION ?2 
use (helmet.xssFilter({ setOnOldIFE: 
use (responseTime ());} 

Use (helmet.frameguard () ) ; 

.USe (helmet.ieNoOpen () ) ; 

use (helmet .noSniff())，; 

.use (helmet.hidePoweredBy({ setTo: 
use (compression()); 

.USe (cookieParser () ) ; 

use (bodqyParser .json()):; 

.use (hpp () ) :; 

usSe (eors({: origin: 


use('/api', 
use (favicon(resolve( dirname, '..', 
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{ ._PRODUCTION-— .from 
{ resolve } from ‘path"; 


renvirons'.: 


使 用 ES 模块 语法 ,通过 


bodyParser from ‘body-parser'; ESM 在 Node 8.5 或 更 高 

compression from 'compression'; 版 本 中 可 用 

COrs frem "Cors'? \ 

express from ‘express'， 

helmet from '‘'helmet',，; 

favicon from 'serve-favicon'; 

hpB irom "hpp'; 

logger from "morgan ' ， 

CookieParser from ‘cookie-parser'; 

responseTime from '‘'response-time',; 

* as firebase from 'firebase-admin'; 

COnNtig fom "eontfig!; 

人 设置 可 应 用 于 所 有 传人 
0 请 求 的 中 间 件 ， 处 理 日 
express () ; 志 、 一 些 基 本 的 安全 保 


护 、 传 人 请 求 的 解析 


DB (); 
'combined' 'dev'))» 
tue ))? 


bp} 


!'react" 


啊 应 请 求 ， 将 在 此 与 


React-DOM 进行 集成 


ontlg.get ("ORIGINS®) }));» 


backend); 


'static', ‘assets', ‘'meta', 


'favieon. Lee))): 


app. 


app. 


usel( (reqg, 
const err = 
err, status = 
next (err); 


use( (err, 


ras, ert) => 《 
new Error('Not Found').: 
404，; 


错误 处 理 代 码 ， 它 将 捕获 从 
其 他 路 由 转发 的 错误 并 将 这 
些 错误 发 送 给 客户 端 

res) 


req, = 4 


Console.error (err);} 


return res.status (err.status 


中 这 


}}s 


module. 


I 500) .IJS6n(t 


MeESSageE: eIrIIr.MmMeSSage 


exports = PP: 


我 们 期 望 迈 出 的 第 一 步 是 引入 React-DOM 并 尝试 泻 染 一 个 简单 的 组 件 。 在 继续 集成 应 用 之 前 ， 


258 第 12 章 服务 器 端 React 与 集成 React Router 


先 泻 染 一 个 包含 一 些 文本 的 简单 div。 在 这 个 小 示例 中 我 们 将 使 用 React .createElement, 这 
样 就 不 必 处 理 服 务 器 文件 的 转译 问题 , 但 是 稍 后 将 组 件 拉 进 来 使 用 时 , 将 能 够 在 其 他 文件 中 使 用 
JSX。 这 是 因为 使 用 了 babel-register, 一 个 用 于 开发 的 Babel 库 ， 其 能 够 动态 转译 代码 。 可 
以 在 index.js 中 看 到 引入 的 babel-register, 在 生产 环境 中 不 要 这 人 么 做 。 我 们 会 使 用 Webpack 
和 Babel 之 类 的 工具 将 代码 编译 成 包 。 

对 于 第 一 次 尝试 ， 要 做 的 所 有 事情 就 是 插入 一 条 简单 的 消息 作为 div 的 子 内 容 并 将 其 发 送 给 客户 
端 。 一 旦 准备 好 了 ， 就 运行 服务 器 并 检查 返回 的 结果 。 图 12-4 展示 了 代码 清单 12-4 所 做 的 工作 。 


服务 器 








一 一 一 一 一 一 一 一 一 一 一 一 二 一 一 一 一 一 一 一 一 一 一 一 一 一 一 ~ 上 上 ae 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


啊 应 处 理 器 

















0 一 一 一 -用 ReactDOM 生 成 一 些 基本 的 。 | 
! - 处 理 全 局 日 志 ' ”静态 HTML， 并 将 其 作为 字符 | 
' - 压缩 上 ” 串 响 应 发 送 给 客户 端 人 
， - 处 理 未 找到 的 情况 


Nee na Na ps ep DD ay ep ei ep ep np es ep ew i 


服务 器 响应 
包含 生成 的 HTML 


浏览 器 请 求 
GET http: //localhost: 
3000/<route-name> 


12-4 现在 使 用 React-DOM 来 泻 染 简单 的 HTML 字符 串 并 将 其 发 送 到 客户 端 。 从 某 种 意义 上 说 ， 
这 就 是 SSR 的 全 部 ( 创建 静态 标记 ， 并 将 其 发 送 到 客户 端 )。 我 提 到 的 复杂 性 往往 来 自 ( 除了 其 他 
事项 ) 获取 创建 文本 所 需要 的 所 有 数据 、 协 调 与 客户 端的 流程 ， 以 及 进行 优化 


代码 清单 12-4 ”尝试 服务 器 端 泻 3 





在 请 求 处 理 程序 中 ,创建 HTML 


i 9 2 

app.use('/api', backend); 字符 串 并 将 其 发 送出 去 

app.use (favicon(resolve(_dirname, '..', 'static', ‘assets', "meta '， 
Favmicon,. eo )))}s 


appUSe("*, ‘(reg, Xe8, niext) => 1 
const componentResponse = ReactDOMServer.renderToStringl( | 


React .createElement ( | 用 div 来 创建 一 个 不 带 使 用 renderToString 
"ly: 属性 的 元 素 并 传人 一 个 基本 的 


null, ， React 元 素 


‘Rendered on the server at 9${fnew Date() }- 
) 
) ; 全 人 时间 


简单 文本 作为 子 内 容 
} ) ; 


将 啊 应 发 送 


res.send(componentResponse) .ena () :; 
| 到 客户 端 
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进行 了 代码 清单 12-4 中 的 更 改 之 后 ， 在 终端 执行 node server/run.js 启动 服务 器 ， 然 后 通 
过 另 一 个 会 话 用 cURL 发 送 请 求 ， 接 着 应 该 就 会 看 到 从 服务 器 返回 的 响应 。 在 此 之 前 , 我 们 每 次 从 服 
务 器 发 送 相同 的 HTML 字符 ， 而 该 文档 会 在 此 之 后 加 载 应 用 的 脚本 。React 会 运行 并 将 应 用 程序 泻 染 
为 DOM ( 创建 DOM 节 点, 分配 事 件 监听 器 ， 等 等 )， 通 过 这 种 新 方式 ， 可 以 将 首次 泻 染 委托 给 服务 
器 并 让 React 接手 。 代 码 清单 12-5 展示 了 如 何 运行 服务 器 并 使 用 cURL 查看 从 服务 器 返回 的 响应 。 


代码 清单 12-5 ”检查 第 一 个 服务 器 端 泻 染 的 响应 





$ npm run server:dev 


// -ina different terminal session 请 求 运行 服务 器 ,检查 返 
Gurl ~vy http://localhost: 3000 回 的 内 容 


GBT 7 HITB/LsA 

Hosts: localhosts 3000 
UsSer-Agents: curl/7.51.0 
Accept: 大 /> 


tp 应 该 能 在 请 求 中 得 到 返回 的 头 
X-XSS-Protection: 1; mode=block 信息 ， 但 最 关心 的 是 啊 应 体 
X-Frame-Options: SAMEORIGIN 

X-Download-Options: noopen 

X-Content-Type-Options: nosniff 

ACCeSs-CONntrol-AllOw-Origin: * 

Content-Type: text/html; charset=utf=8 

Content-Length: 144 

ETag: W/"90-gXhNJUy73fc2MSrpr7eaKDZ70V8" 

Vary: Accept-Encoding 

X-Response-Time: 0.795ms 

Date: Mon, 08 May 2017 10:26:55 GMT 

Connection: keep-alive 


Curl http done: called premature == 
Connection #0 to host localhost left intact 


“A YY YY YW 


<div data-reactroot="">Rendered on the server at Mon May 08 2017 03:26:55 
WE 最 外 层 的 HTML 元 素 上 有 特定 的 
react-root 和 react-checksum 属性 
人 至此， 已 经 完成 了 第 一 次 服务 需 端 泻 染 。 使 用 React 来 创建 React 组 件 的 字符 串 表示 形式 并 
将 其 发 送 给 客户 端 。 现 在 ， 因 为 React 还 没有 被 加 载 ， 因 此 它 无 法 从 服务 器 放手 的 地 方 接续 ， 但 
一 经 引入 ， 它 就 能 接管 了 。 汐 试 运行 相同 的 命令 ， 但 选择 使 用 renderToStaticMarkup, 看 
看 来 自 服务 器 的 HTTP 响应 有 何不 同 。 


12.5 切换 到 React Router 
之 前 几 章 中 构建 的 路 由 器 针对 浏览 器 内 的 路 由 处 理 进行 了 优化 ,但 其 设计 并 没有 考虑 服务 器 
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端 泻 染 。 深 入 研究 和 了 解 React 能 做 什么 主要 徘 自己 动手 去 构建 ， 而 不 只 是 安装 一 个 第 三 方 库 ， 
我 希望 能 让 读者 了 解 如 何以 不 同 的 方式 使 用 组 件 。 

这 个 路 由 需 对 于 示例 应 用 这 样 相 对 简单 的 需求 可 能 已 经 够 用 了 ， 但 它 在 某 些 方面 可 能 还 
有 所 欠缺 。 它 有 一 个 非常 简陋 的 API, 如 果 可 以 文 持 路 由 钩子 (路 由 之 间 的 转换 )、middleware 
(可 以 应 用 于 多 个 路 由 的 逻辑 ) 之 类 的 就 好 了 。 随 着 逐步 深入 React 服务 需 病 泻 染 ， 将 需要 更 
多 功能 ， 例 如 ， 能 够 根据 请 求 URL 生成 要 泻 染 的 组 件 树 。 这 就 是 为 什么 要 转 而 使 用 React 
Router V3, 

React Router 似乎 是 React 中 最 常用 和 最 先进 的 React 路 由 解决 方案 ， 它 在 GitHub 上 拥有 强 
大 的 追随 者 和 社区 贡献 者 ， 并 经 历 了 几 次 重大 修订 。 

在 撰写 本 书 时 ，React Router 的 最 新 主 版 本 是 4。 当 前 还 在 更 新 ， 有 可 能 在 你 阅读 本 书 时 它 

经 被 新 的 主 版 本 所 取代 。 我 们 将 使 用 版 本 3， 因 为 它 的 API 和 之 前 创建 的 路 由 需 非 常 类似 ， 应 
ee 1 需要 做 很 少 的 修改 就 能 使 用 。 之 所 以 使 用 它 还 因为 它 是 由 React 开源 社区 持续 开发 的 一 种 健 
壮 的 技术 ， 它 比 之 前 的 那个 简单 的 路 由 需 强 多 了 ， 甚 至 已 经 超出 了 当前 的 需求 。 


选择 第 三 方 库 与 自己 造 轮子 ee 

切换 到 React Router 而 不 是 坚持 自己 的 解决 方案 的 另 一 个 原 因 是， Rede Router 更 适合 开发 者 及 
其 团队 所 处 的 业务 环境 。 开 发 者 通常 会 选择 React Router 这 样 的 开源 解决 方案 而 不 是 自己 编写 。 这 是 
因为 ， 根 据 开发 者 的 需求 ， 构 建 和 维护 问题 的 健壮 解决 方案 所 需要 的 时 间 有 可 能 值得 ， 也 有 可 能 不 什 
得 。 当 涉及 外 部 依赖 关系 时 ， 在 “ 自 建 还 是 购买 ”的 决策 上 进行 抉择 可 能 很 棘手 。 我 这 里 的 意见 是 牢 
记 这 两 件 事情 : ( 1 ) 不 必 因为 别人 用 什么 就 用 什么 ; ( 2 ) 构建 自己 的 解决 方案 需要 做 的 工作 通常 要 比 
初期 工作 多 得 多 一 一 维 护 才 是 最 为 耗 时 的 事 。 拥 有 大 量 开源 贡献 者 的 大 型 社区 通常 会 在 自 建 者 遇 到 
‘bug 之 前 就 捕获 到 这 些 bug。 ea AL 


值得 注意 的 是 ，React Router 是 一 项 非常 重要 的 技术 ， 我 们 这 里 只 是 简单 地 了 解 其 核 心 能 力 。 
这 个 项 目 包含 了 许多 场景 的 多 种 路 由 特性 。 最 新 的 主 版 本 〈 所 写本 书 时 是 4 ) 甚至 包含 React Native 
平台 的 路 由 解决 方案 。 使 用 和 开发 React Router 的 大 量 开 发 者 助力 这 个 项 目 ， 使 其 变 得 非常 有 用 ， 
但 它 也 有 缺点 ,就 是 主 版 本 之 间 有 时 会 有 巨大 的 变化 。 正 是 由 于 这 个 原因 , 加 上 版 本 3 和 我 们 从 头 
构建 的 路 由 器 的 相似 之 处 , 我 们 不 会 使 用 最 新 版 本 的 React Router。 如 果 想 要 使 用 最 新 版 本 的 React 
Router， 我 在 目 己 的 博客 中 有 一 忆 文 章 中 介 PT React 16 与 React Router v4 的 使 用 。 我 还 注意 到 ， 
只 需 在 转换 





il iotaapnbyed 


设置 React 路 由 器 


我 们 已 经 决定 使 用 React Router 作为 自己 路 由 带 的 生产 环境 替代 品 ， 让 我 们 看 看 如 何 设 置 它 。 
第 一 步 是 确保 已 经 安装 了 React Router 并 切换 了 当前 的 路 由 需 。 哩 然 技 术 不 一 样 ， 但 要 使 用 的 
API 应 该 是 非常 相似 的 。 
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React Router 应 该 已 经 作为 项 目 依 赖 被 安装 了 。 现 在 需要 开始 将 项 目 过 渡 到 React Router 
并 准备 一 个 允许 执行 SSR 的 设置 。 让 我 们 从 当前 的 src/index.js 文件 开始 。 这 是 设置 应 用 主 
要 部 分 的 入 口 文件 ,包括 监听 浏览 器 历史 记录 、 泻 染 路 由 器 组 件 ， 以 及 激活 身份 验证 事件 
监听 货 。 

这 对 SSR 的 设置 没有 用 ， 因 为 有 太 多 的 代码 依赖 于 浏览 器 环境 而 且 也 不 需要 React Router 
的 所 有 功能 来 让 应 用 运作 。 真 正 需 要 保留 的 是 身份 验证 监听 需 。 在 添加 任何 内 容 之 前 ， 先 创建 一 
个 帮助 工具 供 以 后 使 用 。 代 码 清 单 12-6 展示 了 如 何 创建 一 个 简单 的 实用 程序 来 检查 你 当前 是 否 
处 在 浏览 硕 环 境 中 。 一 些 工 具 技术 ， 如 Webpack， 可 以 帮助 我 们 打包 环境 相关 的 代码 。 但 就 我 们 
的 目的 而 言 ， 会 保持 这 个 更 简单 的 方式 。 





代码 清单 12-6 检查 浏览 器 环境 ( src/utils/environment.js ) 


export function isServer() { 
return typeof window === "undefined' ; 


} 


现在 可 以 使 用 这 个 帮助 方法 来 确定 所 处 的 环境 并 根据 需要 有 条 件 地 执行 代码 。 它 并 不 会 进行 
话 尽 的 检查 来 确保 处 于 浏览 器 环境 中 ， 但 应 该 满足 当前 的 需求 。 在 构建 具有 SSR 功能 的 应 用 程 
序 或 在 客户 端 和 服务 紫 之 间 共 享 代码 的 应 用 程序 ( 有 时 被 称 为 “通用 ”或 “ 同 构 ”) 时 ， 必 须 考 
虑 代码 的 运行 环境 。 根 据 我 的 经 验 , 这 也 可 能 是 那些 难以 追踪 的 bug 的 常见 来 源 , 特别 是 如 果 安 
疫 的 第 三 方 依赖 项 没有 考虑 到 环境 的 影响 。 

到 目前 为 止 ，React 社区 中 的 许多 现 有 技术 通常 要 么 已 经 支持 SSR， 要 么 会 指出 可 能 导致 问 
题 的 地 方 。 但 情况 并 非 总 是 如 此 。 几 年 前 使 用 React 的 早期 版 本 时 ， 我 遇 到 了 React 目 己 的 bug， 
其 会 导致 某 些 库 的 某 些 方面 无 法 预料 地 失败 。 不 过 现在 情况 好 多 了 ，SSR 不 只 是 React 社区 考虑 
的 问题 ， 也 是 核心 团队 考虑 的 问题 。 

继续 之 前 ， 我 们 需要 对 其 中 一 个 reducer 进行 微调 以 便 将 服务 需 环 境 考 虑 进来 。user reducer 
会 使 用 js-cookie 在 浏览 器 中 设置 cookie。 服 务 右 通常 不 允许 存储 cookie (虽然 有 些 库 可 以 模 
拟 这 一 行为 , 如 tough-cookie )， 所 以 需要 使 用 刚才 的 环境 判断 实用 程序 来 调整 这 段 代 码 。 代 
人 码 清单 12-7 展示 了 需要 做 的 修改 。 


代码 清单 12-7 ”修改 user reducer 





export function user (state = initialState.user, action) { 
switch (action.type) 1 
case types.auth.LOGIN SUCCESS: 


Const 1{ user, token } = action; 

a Ps tters-token', token) 只 在 浏览 迄 环 境 中 才 尝 
ooklies.se etters-— en', - 

) 试 使 用 浏览 颖 cookie 


return Object.assign({}, state.user, 1 
authenticated: true, 
name: user.name, 
TB: USerE iLO, 


262 第 12 章 服务 器 端 React 与 集成 React Router 


profilePicture: user.profilePicture || 
'/static/assets/users/4.jpeg', 
token 
}); 
case types.auth.LOGOUT_ SUCCESS: 
Cookies.remove('letters-token'); 
return initialState.user; 
default: 
return state; 
} 
} 


回 到 手头 的 任务 。 你 需要 将 React Router 设置 好 。 与 自 建 的 路 由 屁 非 常 相似 ，React Router( 版 
本 3 ) 允许 使 用 骸 套 的 <Route> 组 件 层次 结构 来 指示 应 该 将 哪些 组 件 映射 到 哪些 URL。 正如 之 前 提 
到 的 ，React Router 是 一 个 广泛 使 用 和 经 过 “实战 检验 ”的 解决 方案 ， 具 有 许多 我 们 目 己 没有 添加 
到 路 由 需 的 特性 ， 我 们 关注 使 用 它 直 接替 换 自 己 的 路 由 器 ， 而 不 是 去 探索 它 能 做 哪些 事情 。 

为 我 们 的 路 由 需 创 建 一 个 新 文件 src/router.js。 将 路 由 分 解 到 它们 上 自己 的 文件 中 , 因为 服务 需 
和 客户 端 都 要 访问 它们 。 对 客户 端 代码 和 服务 需 代 码 并 存 的 应 用 程序 来 说 ， 这 很 方便 。 但 如 果 路 
由 文件 存放 在 其 他 地 方 (通过 npm 、Git 子 模块 等 ), 可 能 需要 寻找 其 他 方式 将 其 引入 到 服务 需 中 。 
路 由 文件 应 该 与 之 前 自 建 的 路 由 器 很 相似 ， 仅 有 一 些 细微 差异 。 我 们 之 前 添加 了 在 同一 个 
<Route/> 组 件 中 指定 index 组 件 的 功能 ， 而 React Router 也 为 此 提供 了 一 个 单独 的 组 件 。 图 12-5 
从 较 高 层次 展示 了 路 由 配置 的 作用 ， 它 的 工作 方式 与 之 前 自 建 的 路 由 器 相同 ， 用 于 将 URL 映射 
到 组 件 或 组 件 树 ( 当 藤 套 时 )。 


URL (客户 端 或 服务 器 ) 


https://example.com/example/nested-route 






演 染 组 件 树 





URL: /example' <ParentComponent /> 











<ParentComponent /> 
URL: ‘ /example/nested-route' <ExampleComponent /> <ExampleComponent /> 
路 由 配置 〈 代 套 | 将 URL 映 身 <ExampleComponent /> 






的 React 组 件 ) | 到 组 件 





URL: example/other-route'’ <DifferentComponent /> 






图 12-5 ”一 如 我 们 构建 的 路 由 器 ，React Router 的 路 由 配置 将 URL 映射 到 组 件 。 为 了 跨 页 面 或 子 
区 域 共 享 Ul 的 某 些 部 分 ( 如 Navbar 或 其 他 共享 组 件 )， 可 以 府 套 组 件 


代码 清单 12-8 展示 了 如何 将 React Router 集成 到 路 由 设置 中 。 





代码 清单 12-8 ”为 React Router 创建 路 由 ( src/routes.js ) 


import React from 'react'; 





Import App from './pages/app'; 
import Home from './pages/index'; 


12.5 ”切换 到 React Router 263 


import SinglePost from './pages/post'; 
import LOogin from ': /pages/l160g1in'; 
将 
import NotFound frem-'./pages/404; 用 App 组 件 将 整 
个 应 用 包 囊 起 来 
import { Route, IndexRoute } from ‘react-router'; 
使 用 React Router 的 IndexRoute 
export const routes = ( 组 件 来 确保 能 在 index (/ ) 路 径 下 
<Route path="/" component={App}> 显示 组 件 
<IndexRoute component={Home} /> 
<Route path="posts/:post" component={SinglePost} /> 就 像 自 己 的 路 由 需 那 样 


<Route path="login" component={Login} /> 使 用 路 径 来 匹配 组 件 
<Route path="*" component={NotFound} /> 
</Route> 


2 


现在 已 经 设置 了 一 些 路 由 ,可 以 使 用 React Router 将 它们 导入 主 应 用 程序 文件 中 使 用 。 客 户 端 
和 服务 器 上 将 使 用 相同 的 路 由 ， 这 正 是 你 可 能 听 说 过 的 SSR“ 通 用 ”或 “ 同 构 ”发 挥 作 用 的 地 方 。 
在 客户 端 和 服务 器 上 复 用 代码 可 能 是 件 大 事 , 但 在 当前 如 此 有 限 的 情况 下 , 可 能 不 会 得 到 更 多 的 好 
处 ， 这 里 得 到 的 好 处 是 ， 可 以 很 容易 地 以 “正常 ”的 React 方式 将 客户 端 组 件 骏 露 给 服务 硕 。 

现在 将 路 由 导入 服务 器 。 代 码 清单 12-9 展示 了 如 何 将 路 由 导 和 服务 器 并 在 泻 染 过 程 中 使 用 它 
们 。 服 务 器 如 何 获 取 到 正确 的 组 件 进行 泻 染 呢 ? 因为 路 由 只 是 将 URL 映射 到 操作 ( 这 里 是 HTTP 
响应 ), 所 以 需要 能 够 查找 与 路 径 相 关联 的 正确 组 件 。 在 自 建 的 路 由 器 中 , 是 用 基本 的 URL 正则 匹 
配 库 来 确定 URL 是 否 被 映射 到 路 由 器 中 的 组 件 上 的 。 它 做 的 工作 就 是 基于 URL 确定 泻 染 哪 个 组 件 
( 见 图 12-5 )， 如 果 有 的 话 。React Router 允许 在 服务 器 端 做 同样 的 事 。 这 样 一 来 ， 就 可 以 使 用 传人 
服务 器 的 HTTP 请 求 的 URL 去 匹配 要 泻 染 为 静态 标记 的 组 件 。 这 是 React Router 和 我 们 SSR 目标 
之 间 的 关键 连接 点 。React Router 像 通常 那样 使 用 URL 来 泻 染 组 件 或 组 件 树 ， 只 不 过 是 在 服务 舌 上 。 
代码 清单 12-9 展示 了 如 何 使 用 React Router 设置 SSR 功能 的 初始 服务 需 部 分 。 


代码 清单 12-9 ”在 服务 器 上 使 用 React Router ( server/server.js ) 





信人 

Import { renderToString } from ‘react-dom/server'; 

import React from ‘react'; 从 React Router 导入 一 些 
import { match; RouterContext } from "react=router"; 实用 方法 从 React DOM 


import { Provider } from "raact~redux'’ 


导入 renderToString， 导 


import configureStore from "../sre/store/eonfigureStore";y 入 Redux Provider 组 件 、 
imBort initialReduxState from '../src/constants/initialSsState'; store 和 路 由 
import { routes } from "s/sre/routes's 
RR 将 URL 和 路 由 传人 
app.use('*', (req, res) => { match 阴 数 

ee Ra ts eee 0 和 match 给 出 错误 、 重 

err, redirectLocation, props) = 
if (redirectLocation && req.originalUrl1 !== '/login') 1 定向 和 属性 ,将 用 于 


Ve } | 
return res.redirect(302, redirectLocation.pathname + 演 染 定制 错误 页 面 
redirectLocation.search);) 或 重 定 问 
} 
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const store = configureStore (initialReduxState); 
const appHtml = renderToStringl 传人 从 React Router 导 
<Provider store={store}> 入 的 RouterContext 组 
人 {sss DESDSsF /> 件 并 把 它 包装 在 Redux 
下 Provider 组 件 中 
const html = . 
<Ildoctype html> 
人 <html 
使 用 字 <head> 
符 串 模 <link rel="stylesheet" 
板 创建 href="http://localhost:3100/static/styles.css" /> 
A <meta charset=utf-8/> 
ot. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
HTML <title>Letters Social | React In Action by Mark 
文档 ， Thomas</title> 
并 将 应 <meta name="viewport" content="width=device-width, 
用 的 initial-scale=1"> 
HTML </head> 
插入 <body> 
<div id="app"> 
a $ {appHtml} 
</div> 


<script src="http://localhost:3000/bundle.js" 
type="'text/javascript'></script> 


</body> 
</html> 
"eT 
res.setHeader('Content-type', ‘text/html'); 设置 啊 应 头 并 将 其 
res.send (html) .enQ() ， 


发 回 给 浏览 胡 


/f/f... Error handling 


export default app; 


12.6 使 用 ReactRouter 处 理 已 验证 的 路 由 器 


现在 服务 右 已 经 设置 好 了 ，, 你 可 以 稍微 清理 一 下 应 用 程序 的 客户 端 。 你 需要 确保 使 用 了 新 的 路 
由 设置 , 还 需要 移动 一 些 与 身份 验证 相关 的 逻辑 以 便 更 好 地 使 用 React Router。 为 此 , 将 使 用 React 
Router 提供 的 一 组 特性 : 钩子 (hook )。 与 挂 载 、 更 新 和 缉 载 组 件 的 生命 周期 方法 的 工作 方式 类 似 ， 
React Router 为 路 由 之 间 的 跳 转 开放 了 某 些 钧 于 。 有 很 多 方式 使 用 这 些 钩 子 ， 包 括 以 下 几 种 : 

加 允许 在 完成 URL 转换 之 前 ， 为 页 面 触发 数据 获取 或 检查 用 户 是 否 登录 

加 在 用 户 离开 页 面 时 做 清理 工作 或 者 结束 分 析 会 话 ， 并 不 局 限于 进入 相关 的 事件 ; 

国 使 用 React Router 的 钩子 甚至 可 以 做 同步 或 异步 工作 ， 所 以 你 不 会 受 任何 限制 ; 

加 ”将 pageview 事件 发 送 到 像 Google Analytics 这 样 的 分 析 平 台 。 
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图 12-6 展示 了 在 React Router v3 中 使 用 钧 子 的 基本 流程 。 React Router 在 底层 与 History API 
进行 交互 ,但 公开 这 些 钓 子 以 便 让 应 用 程序 中 的 路 由 更 容易 。 如 果 想 更 多 了 解 React Router v3 API 
或 者 探索 社区 编写 的 其 他 有 用 的 指南 ， 可 以 在 GitHub 上 查看 这 些 文档 。 









重 定向 (如 果 有 必要 ) 


开始 转换 
\ (用 户 发 起 或 程序 触发 ) 





onEnter(nextState, replace, callback?) 


onChange(prevState, nextState, replace, callback?) 
onLeave(prevState) 


转换 结束 


在 即将 进入 一 个 路 由 之 前 调用 


在 location 改 变 时 在 路 由 上 调用 ,但 
路 由 本 身 既 没 有 进入 也 没有 离开 


在 即将 离开 一 个 路 由 时 调用 





12-6 ”React Router 在 Route 组 件 上 公开 了 一 些 事件 处 理 器 。 可 以 用 这 些 事 件 处 理 器 挂钩 到 由 用 户 或 


代码 触发 的 路 由 跳 转 过 程 。 注 意 “redirect” 不 是 3XX 状态 码 的 HTTP 重 定向 


使 用 onEnter 钩子 检查 某 些 路 由 的 已 登录 用 户 ， 如 果 没 有 经 过 身份 验证 的 用 户 ， 则 将 其 重 定 
向 到 登录 页 面 。 现实 中 , 开发 者 应 该 从 安全 的 角度 透彻 地 对 应 用 进行 思考 并 人 花费 大 量 时 间 思考 如 
何 防止 用 户 跳 转 到 他 们 不 应 该 访问 的 页 面 。 还 需要 确保 将 安全 策略 延伸 到 服务 器 。 但 就 目前 而 言 ， 
Firebase 和 路 由 钩子 应 该 足以 保护 一 些 路 由 。 代 码 清 单 12-10 展示 了 如 何 为 受 保 护 的 页 面 设置 
onEnter 多 子 。 你 可 能 已 经 看 出 了 上 一 章 中 的 身份 验证 逻辑 ， 之 前 在 登录 action 中 使 用 过 这 个 
逻辑 。 图 12-6 展示 了 这 一 过 程 如 何 工作 。 


代码 清单 12-10 “设置 onEnter 钩子 ( src/routes.js ) 





import 
import 


import 
import 
import 
import 
import 
import 
import 
import 
import 


React from ‘react'; 
{ Route, IndexRoute } from ‘react-router'; 


ep eh te ed lp React Router 钩子 接受 3 个 参数 : 
SinglePost from './pages/post'; nextState 、replace 轴 数 和 回调 函数 
Login from '‘'./pages/login'; 

Profile from '‘'./pages/profile'; 

NotFound from '‘'./pages/error'; 


{ firebase } from '‘'./backend'; 守信 Firebase 
{ isServer } from ‘'./utils/environment"'; 和 isServer 实用 
{ getFirebaseUser, getFirebaseToken } from './backend/auth'; 程序 


async function requireUser (nextState, replace, callback) { 
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if (isServer()) { FE i 小 
全 - 页 
epee 如 有 果 在 服务 侣 上， 需要 知道 当前 是 否 处 于 登录 页 
, 则 继续 面 ， 以 避免 无 限 重 定向 
ERY 1 
const isOnLoginPage = nextState.location.pathname === '/login'; 
Const firebaseUser = await getFirebaseUser(); 
const fireBaseToken = await getFirebaseToken () :; 使 用 示例 代码 库 中 包 
const noUser = !firebaseUser || !fireBaseToken,; 含 的 Hirebase 实用 函数 
If (noUser && !1isoOnLodginPage && !isServer()) { 来 获取 Firebase 用 户 和 
replace l(t token 
athname: '/login' 
ee " 如 果 没 有 token 或 用 户 并 且 不 在 登 
return callback(); 录 页 面 ， 我 们 需要 重 定向 用 户 


} 


if (noUser && isOnLoginPage) { et 但 在 登录 页 
Bt I 7: ~ 


面 ， 允 许 继续 


return callback():; 
} 
return callback(); 

} eateh (ery 


returm callback (err); 二 将 其 传 
入 回调 函数 
使 用 属性 将 钩子 
export const routes = ( 添加 到 适当 的 组 
<Route path="/" component={App}> 件 上 


<IndexRoute component={Home} onEnter={requireUser} /> 
<Route path="/posts/:postId" component={SinglePost} 
onEnter={requireUser} /> 
<Route path="/login" component={Login} /> 
<Route path="*" component={NotFound} /> 
</Route> 
); 


在 继续 之 前 ， 需 要 做 的 最 后 一 点 设置 是 清理 应 用 程序 主 文件 并 蔡 换 链接 组 件 。 代 码 清单 12-11 
展示 了 客户 端 主 文件 的 简化 版 本 。 


代码 清单 12-11 ”清理 应 用 的 index 文件 ( src/index.js ) 





import React from '‘'react'; 
import { hydrate } from 'react-dom'; 
import { Provider } from 'react-redux'; 


import { Router; browserHistory } from 'react-router'; 
import configureStore from './store/configureStore'; i 
import initialReduxState from '‘'./constants/initialState'; browserHistory 
ijmport { routes } from './routes'; \ 

导入 routes 
import '. /shared/cerash'; 
import './shared/service-worker'; 


import './shared/vendor'; 
// NOTE: this isn't ES*-compliant/possible, but works because we use 
Webpack as a build tool 
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import "'./styles/styles.scss',; 


// Create the Redux—stoxe 


const store = configureStore(initialReduxState),; bop Redux 


Provider 中 
hydratel 


<Provider store={store}> 


<Router history={browserHistory} routes={routes} /> 
</Provider>, 把 routes 和 
document .getElementById ('app') browser History 传人 
) ; Router 组 件 


从 React-DOM 导入 并 使 用 hydrate 方法 ， 这样 它 
就 可 以 处 理 服务 需 冰 泻 染 的 HTML 标记 


已 经 使 用 browserHistory 设置 了 React Router， 但 同样 也 可 以 使 用 基于 哈 希 或 内 存 中 的 历史 
记录 来 进行 设置 。 它 们 与 浏览 句 的 历史 记录 稍 有 不 同 ， 因 为 它们 使 用 了 不 同 的 浏览 髓 History API。 
基于 哈 硕 的 历史 记录 API 可 以 通过 更 改 URL 中 的 哈 希 片段 来 工作 , 但 不 会 更 改 用 户 的 浏览 器 历史 记 
录 。 基 于 内 存 的 历史 记录 则 根本 不 操作 URL， 更 适合 本 地 开发 或 React Native (下 一 章 会 介绍 )。 

如 果 在 本 地 运行 应 用 程序 ， 应 该 能 够 看 到 服务 需 端 泻 染 好 了 所 有 内 容 并 将 其 发 送 到 客户 端 。 
React 应 该 会 如 期 接管 并 让 应 用 产生 交互 。 但 你 可 能 会 注意 到 一 件 事 : 带 链 接 的 路 由 似乎 不 起 作 
用 了 。 这 是 因为 我 们 构建 了 自己 的 链接 组 件 ， 它 还 与 日 路 由 需 集 成 在 一 起 。 幸 运 的 是 ， 要 解决 这 
个 问题 , 只 需要 把 一 直 使 用 的 历史 模块 替换 成 React Router 使 用 的 历史 模块 。 这 更 改 应 该 很 简单 ， 
但 值得 指出 的 是 ， 当 选择 或 自 建 路 由 器 时 ， 可 能 会 影响 应 用 程序 的 大 部 分 内 容 。 链 接 、 页 面 间 的 
改变 、 属 性 的 访问 方式 都 可 能 会 受到 路 由 的 影响 ， 我 们 应 该 考虑 到 这 一 点 。 

我 们 需要 做 的 主要 更 改 是 奉 换 抒 链接 组 件 使 用 的 历史 模块 。React Router 仍然 使 用 浏览 器 
History API， 但 可 以 使 用 React Router 提供 的 功能 来 与 路 由 屁 进 行 同步 ， 而 不 是 使 用 之 前 使 用 的 
东西 。 由 于 我 们 集中 包 痛 了 导航 ,因此 任何 需要 路 由 用 户 的 操作 应 该 都 能 在 新 设置 中 很 好 地 工作 。 
代码 清单 12-12 展示 了 需要 修改 的 行 。 除 此 之 外 ， 不 需要 修改 其 他 任何 东西 。 





代码 清单 12-12 ”替换 历史 模块 ( src/history/history.js ) 


import { browserHistory } from ‘react-router'; 
口 堂 s 所 Y 
const history = typeof window !== "unaefined' | rr 让 
? browserHistory React Router 知道 转换 
$4 pusks (3 = {SF 
const navigate = to => history.push (to) ; 


export 1{ history,: navigate }; 


做 好 这 些 修改 后 ， 应 该 就 能 在 服务 磊 上 使 用 React Router 进行 泻 染 了 1! 我 们 来 总 结 一 下 。 

加 ” 当 请 求 进来 时 , 将 请 求 的 URL 传递 给 React Router 的 match 实用 工具 来 获得 想 要 泻 染 
的 组 件 。 

图 使 用 match 返回 的 结果 ， 通 过 React DOM 的 renderToString 方法 来 构建 HTML 啊 
应 并 将 其 发 回 给 客户 端 。 

图 ”如 采用 cURL 或 开发 者 工具 来 检视 开发 服务 右 ( 使 用 npm run server:dev 来 运行 )， 
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应 该 能 在 啊 应 中 看 到 组 件 的 HTML ( 见 图 12-7 )。 





图 12-7 检视 服务 器 端 泻 染 的 应 用 。 可 以 使 用 React-DOM 创建 应 用 程序 的 HTML， 然 后 将 其 发 送 到 客户 端 。 
注意 ， 由 于 还 没有 进行 任何 服务 器 端的 数据 获取 ， 因 此 不 会 期 望 看 到 任何 动态 数据 填充 到 应 用 程序 中 ( 如 post ) 


12.7 市 数据 获取 的 服务 器 端 泻 3 


服务 笑 病 泻 染 已 经 被 集成 到 应 用 程序 中 了 , 这 可 能 会 对 应 用 程序 的 接触 和 性 能 产生 潜在 的 好 

， 但 仍然 还 有 改进 的 空间 。 我 们 自用 和 之 前 并 没有 将 应 用 滨 染 到 它 的 完整 状态 。 不 管 
pire 我 们 发 送 的 三 载 部 是 相同 的 。 er = 由 浏览 套 来 做 接 下 来 的 事情 ， 如 开始 身份 
验证 流程 和 加 载 帖子 。 服 务 侨 问 泻 染 也 是 同步 的 ， 因为 还 没有 使 用 renderToNodeStream。 本 
方 我 们 将 改进 服务 冀 病 演 染 以 利用 这 个 API 并 在 服务 磊 端 集成 Firebase， 如 此 就 可 以 进行 对 号 份 
验证 状态 有 感知 的 泻 染 。 图 12-8 展示 了 集成 了 数据 获取 的 服务 硕 端 泻 染 的 概览 。 

Firebase 提供 了 一 种 与 浏览 需 端 方式 类 似 的 服务 硕 端 API 交互 的 方式 。 这 样 ， 即 使 在 服务 需 

也 能 继续 将 Firebase 视 为 数据 库 。 其 他 情况 下 ， 开 发 者 可 能 会 用 HTTP 调用 微服 务 或 数据 库 来 
ep tate ] 是 否 处 于 验证 状态 。 这 里 将 持续 使 用 Firebase ， 因 为 我 们 关注 的 是 
React， 但 要 注意 ， 这 里 可 以 在 不 同情 况 下 将 Firebase 蔡 换 为 查询 微服 务 或 数据 库 。 

如 果 你 尚未 创建 Firebase 账户 , 那 现 在 正 是 时 候 创建 。 我 分 发 的 应 用 源 代码 使 用 了 该 账户 的 
公共 token， 但 要 使 用 Firebase 的 用 户 管理 API， 需 要 拥有 真实 的 账户 ( 可 以 使 用 它 来 访问 用 户 
言 上 息 ， 这 是 我 不 希望 大 家 做 的 事情 )。 要 设置 Firebase 账户 ， 请 注册 一 个 账户 ( 应 该 可 以 使 用 已 
有 的 谷歌 账户 小 在 那里 可 以 创建 任意 名 称 的 项 目 。 

之 后 ,需要 进行 Firebase Admin SDK 的 设置 。 因为 流程 可 能 会 随 春 时 间 杰 化 ,所 以 就 不 在 这 

进行 详细 说 明了 。 我 们 最 感 兴 趣 的 是 用 户 管理 API。 你 不 需要 再 在 项 目 中 安装 任何 其 他 东西 ， 
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因为 项 目 依 赖 中 已 经 包含 了 Node.js 的 Firebase SDK。 





服务 器 
WE | \ 1 
1! 中 间 件 ' ， 响 应 处 理 器 ' ID 
' , 解析 传 入 清 求 | ' i IreDase 
人 hg ' ! -获取 用 户 数 据 ， 发 送 Redux action ! 
! -处 理 全 局 日 志 ! -将 初始 store 状 态 代 入 HTML 响 
| -压缩 应 中 ' 使 用 cookie 来 验证 用 户 
os ' ! -用 ReactDOM 生 成 一 些 基本 的 | ; } 
| 处 理 未 找到 的 情况 | 静态 HTML， 并 将 其 作为 字符 。 | 已 经 过 身份 验证 
' ' | 串 响 应 发 送 到 客户 端 

浏览 器 请 求 服务 器 响应 

GET http://localhost:3000/<route-name> 包含 生成 的 HTML 


图 12-8” 带 数据 获取 的 服务 器 端 泻 染 。 这 总 体 上 与 我 们 所 做 的 泻 染 是 相似 的 ， 主 要 区 别 在 于 需要 在 泻 染 过 
程 中 获取 数据 。 泻 染 输 出 会 基于 用 户 是 否 登录 、 用 户 数据 的 内 容 以 及 用 户 何 时 登录 而 不 同 

作为 设置 的 最 后 一 部 分 ， 你 需要 替换 应 用 程序 中 的 Firebase 键 ， 因 为 它们 还 是 Letter Social 
项 目的 键 , 可 能 与 你 的 键 发 生 冲 突 。 你 可 以 在 源 代 码 的 config 目录 中 找到 它们 。development.json 
和 production.json 这 两 个 文件 分 别 包 含 了 开发 环境 和 生产 环境 的 配置 变量 。 你 可 以 根据 需要 随意 
编辑 这 些 变 量 以 及 其 他 变量 ( 也 许 想 自 己 定制 应 用 程序 并 将 其 部 署 到 站 点 上 ! ),。 图 12-9 展示 了 
Firebase 控制 台 和 服务 账户 页 面 。 生 成 新 私 钥 并 将 下 载 的 文件 移动 到 主 应 用 程序 的 代码 库 中 ， 我 
们 之 后 将 很 快 会 用 到 它 。 


Weicometo Firebase 


Latters Social 





图 12-9 创建 新 的 Firebase 项 目 并 生成 新 私 钥 ， 这 将 允许 开发 者 对 Firebase 平台 进行 
身份 验证 并 使 用 SDK 管理 服务 器 上 的 用 户 
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图 12-9 创建 新 的 Firebase 项 目 并 生成 新 私 钥 ， 这 将 允许 开发 者 对 Firebase 平台 进行 
身份 验证 并 使 用 SDK 管理 服务 器 上 的 用 户 ( 续 ) 


现在 已 经 解决 了 这 些 后 勤 方面 的 问题 ， 可 以 继续 编写 代码 了 。 我 们 希望 使 用 Firebase 平台 来 
验证 服务 硕 应 用 ， 如 此 就 能 够 验证 和 获取 Firebase 用 户 来 泻 染 完整 的 应 用 程序 状态 。 你 可 能 已 经 
在 Firebase 平台 的 页 面 上 看 到 了 如 何 进行 该 操作 的 示例 代码 片段 ， 但 代码 清单 12-13 展示 的 是 如 
何在 服务 硕 问 配置 Firebase Admin SDK。 





代码 清单 12-13 在 服务 器 端 集成 Firebase (server/server.js) 


// 

import * as firebase from ‘firebase-admin'; 将 字符 串 化 的 JSON 文件 设 

ImDort Config from COonf1ig"» 导入 Firebase 置 为 环境 变量 ,解析 它 以 便 
Admin SDK - 

// Initialize Firebase i Firebase 能 够 正常 工作 


firebase.initializeApp({ 
credential: firebase.credential.cert (JSON.parse (process.env.LETTERS_ 
FIREBASE ADMIN KEY) )， 
databaseURL: ‘https://letters-social.firebaseio.com' 
要 


// const serviceAccount = require("path/to/serviceAccountKey.json"); 

// admin.initializeApp (1 

// credential: firebase.credential.cert (serviceAccount), 使 用 Firebase 进 
// databaseURL: "https://test-8d685.firebaseio.com" 行 喘 份 验 证 的 
Sk 另 一 种 方式 


// Our dummy database backend 
import DB from '../db/DB'; 


ts 
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现在 ， 当 服务 器 运行 时 ， 它 将 自动 连接 到 Firebase 并 让 开发 者 使 用 Admin SDK 与 用 户 交 
互 ， 这 样 开 发 者 就 能 够 通过 了 解 发 出 请 求 的 用 户 是 谁 的 方式 来 获取 数据 。 为 什么 这 很 重要 ? 你 
可 能 还 记得 我 在 前 面 几 章 中 说 过 ， 服 务 器 端 路 由 可 能 很 复杂 ， 因 为 它 涉 及 客户 端 和 服务 亿 的 同 
步 。 但 我 们 在 这 里 并 不 会 做 非常 复杂 的 事情 ， 而 这 正 是 我 要 指出 的 。 服 务 需 端 泻 染 可 能 很 快 就 
会 变 得 非常 复杂 。 

万 幸 的 是 , 开发 人 员 并 不 需要 做 任何 令 人 旦 惧 的 事情 , 他 们 要 做 的 是 以 一 种 以 前 可 能 没有 用 
过 的 方式 使 用 Redux。 由 于 Redux 并 没有 限制 只 能 在 浏览 器 中 运行 ,， 因 此 也 可 以 将 其 用 于 服务 天 
上 的 状态 管理 。 这 里 简要 罗列 了 完成 允许 数据 获取 的 泻 染 所 要 做 的 事情 : 

国 从 前 面 几 章 存 储 的 cookie 中 获取 用 户 token; 

使 用 Firebase 验证 token 并 且 当 用 户 存在 时 获取 用 户 ; 

如 果 没 有 有 效 的 token (可 能 过 期 了 )， 清 除 cookie 并 将 其 送 往 登 录 页 面 ; 

如 果 是 有 效用 户 ， 则 从 服务 器 获取 用 户 信息 并 同 store 发 送 action; 

根据 store 的 状态 泻 染 合适 的 路 由 组 件 ; 

JSON .stringify 当前 store 的 状态 并 将 其 仍 人 到 需要 发 送 给 浏览 硕 的 HTML 中 。 

这 听 起 来 挺 复杂 , 但 别 着 急 ， 只 是 在 之 前 执行 的 服务 器 端 泻 染 流程 中 添加 了 一 小 步 。 我 们 从 
Firebase 获取 数据 并 使 用 这 些 信 息 进 行 泻 染 ， 而 不 是 每 次 都 泻 染 相同 的 内 容 。 记 住 ， 这 样 做 的 好 
处 是 “完整 ”地 泻 染 应 用 ， 这 样 用 户 就 可 以 立即 看 到 内 容 。 

在 服务 器 中 使 用 Redux 是 “通用 ”JavaScript 的 一 个 很 好 的 例子 。 如 果 Redux 严重 依赖 浏览 
休 API， 那 么 很 难 甚 至 不 可 能 将 它 集成 到 服务 器 上 ， 你 不 得 不 采取 完全 不 同 的 方式 。 实 际 上 ,可 
以 根据 需要 重新 创建 store, 根据 API 和 Firebase 的 响应 更 新 它 , 然后 就 像 在 浏览 磊 中 那样 用 store 
来 泻 染 应 用 程序 。 图 12-10 展示 了 在 本 章 上 下 文中 看 到 的 服务 器 端 泻 染 过 程 。 


服务 器 
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- 解 传 入 > 求 SW ' 
和 te | - 获取 用 户 数据 ， 发 送 Redux action | 
- 处 理 全 局 日 志 | -将 初始 store 状 态 修 入 HTML 响 

! ”应 中 

' - 用 ReactDOM 生 成 一 些 基 本 的 ! 
! 静态 HTML， 并 将 其 作为 字符 。 
! ” 捉 响应 发 送 到 客户 端 | 










派发 


Redux action 






- 压缩 
- 处 理 未 找到 的 情况 
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基于 store 状 态 进行 演 染 ， 
服务 器 响应 并 将 store 状 态 幅 入 HTNL 中 


包含 生成 的 HTML 






浏览 器 请 求 
GET http://localhost:3000/<route-name> 


12-10 ”将 数据 获取 作为 泻 染 过 程 一 部 分 的 服务 器 端 泻 染 
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在 这 一 流程 中 我 们 使 用 了 来 自 浏览 硕 的 cookie 验证 用 户 的 token 是 否 有 效 ， 然 后 从 Firebase 
获取 用 户 并 将 action 发 送 到 服务 器 端 创建 的 Redux store 中 。 这 里 演 染 的 仍然 是 静态 HTML, 但 
这 次 是 使 用 更 新 后 的 状态 进行 泻 染 , 这 样 应 用 程序 就 可 以 用 新 数据 进行 泻 染 了 。 这 里 还 将 状态 蔡 
入 到 HTML 响应 中 ， 如 此 浏览 器 就 能 够 在 服务 需 停 下 的 地 方 继续 。 在 执行 此 操作 要 注意 的 一 点 
是 , Redux store 不 会 在 服务 需 的 内 存 中 被 重新 创建 或 者 持久 化 。 我 曾 参 与 过 的 一 些 项 目 在 本 地 开 
发 过 程 中 曾 短暂 地 发 生 过 这 样 的 问题 , 很 难 追 踪 。 除 了 让 人 感到 厌烦 ,这 还 意味 着 服务 器 会 为 每 
个 发 出 请 求 的 人 演 染 相同 的 用 户 数 据 ， 因 为 store 状态 没有 被 清理 。 这 在 生产 环境 中 是 无 法 接受 
的 安全 漏洞 。 我 提 到 这 一 点 是 为 了 帮 你 认 清 现实 ,协调 浏览 需 和 服务 需 可 能 很 复杂 ， 必 须 小 心 谨 
慎 ， 以 便 出 现 杯 手 的 bug 或 者 安全 漏洞 。 

来 看 一 下 完成 数据 获取 和 泻 染 过 程 所 需 的 代码 。 代 码 清 单 12-14 展示 了 获取 数据 和 处 理 一 些 
( 由 于 过 期 和 无 效 token 引起 的 ) 基本 错误 的 初始 步 又。 下 一 步 ， 我 们 使 用 React-DOM 的 
rendqerToNodeStream 集成 异步 服务 需 端 泻 染 ， 进 一 步 改 善 服务 硕 端 泻 染 。 





代码 清单 12-14 ”为 服务 器 端 泻 染 获 取 数 据 ( server/server.js ) 


ER a ] 创建 Redux store 
const store = configureStore(initialReduxState); 的 实例 
Cr 
const token = reqg.cookies['letters-token"']; 从 请 求 的 cookie 中 
if (token) 1 获取 用 户 token 
| l const firebaseUser = await firebase.auth'() 
用 Firebase 验证 .verifylIdToken (token); 
token 并 使 用 响应 const userResponse = await fetch ( 
从 JSON API 获取 ‘S$S{tconfig.get ("ENDPOINT') }/users/${firebaseUser.uid} 
用 户 和 ( R tat ! 404) { 
二 userResponse.status !== 
const user = await userResponse.]Json(); 如 采用 户 存 在 ， 拆 包 API 
await store.dispatch(loginSuccess(user)); | 的 JSON 啊 应 (这 里 使 用 
多 亏 Redux- await store.dispatch (getPostsForPage());. 的 是 isomorphic-fetch 库 
thunk, 我 们 可 , } 和 async/await 语法 ) 
以 发 送 在 登录 二 和 人 二 (SErY 
时 使 用 的 异步 if (err.errorIinfo.code === "auth/argument-eLrLor ') 1{ 
action 创建 器 res.clearCookie('letters-token'); 如 果 有 类 似 token 
并 等 待 它们 完 a a 过 期 这 样 的 错误 ， 
ispatc e error ep 
成 后 再 继续 3 将 错误 发 送 到 store 


store.dispatch (createError (err) ) ; 
} 
Ff 


这 就 是 使 用 用 户 上 下 文 全 面 泻 染 应 用 程序 所 要 做 的 大 部 分 工作 。 这 个 方法 的 一 个 缺点 是 ,如 
果 有 许多 具有 不 同 数据 获取 需求 的 页 面 ， 就 很 难 满足 这 些 需 求 。 你 没有 办 法 说 :“ 啊 ， 我 们 在 请 
求 钱 页面 ,对 页 面 需要 了 数据 ”但 有 很 多 方法 可 以 做 到 这 一 点 ， 如 果 有 兴趣 了 解 更 多 有 关 这 方 
面 的 内 容 以 及 新 版 React Router 的 内 容 可 以 访问 我 的 博客 。 

为 了 完成 泻 染 的 改进 工作 ， 还 需要 再 做 些 事 情 。 首 先 ， 需 要 找到 方法 注入 React-DOM 返回 
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的 HTML 字符 串 。 因 为 它 需 要 与 流 一 起 工作 ， 所 以 以 前 的 模板 字符 串 的 方式 需要 修改 。 我 们 将 
使 用 两 个 函数 来 为 应 用 程序 编写 HTML，, 而 不 是 直接 注入 生成 的 HTML。 其 中 一 个 函数 将 包含 应 
用 程序 需要 的 头 信息 (关于 应 用 程序 的 元 信息 、Open Graph 数据 、CSS 链接 等 )， 另 一 个 图 数 将 
在 HTML 啊 应 中 能 入 Redux store 的 状态 。 我 们 需要 藤 入 状态 ， 以 便 浏 览 絮 接管 时 不 会 重新 执行 
服务 器 已 经 完成 的 任何 工作 。 我 们 希望 尽量 少 地 泻 染 , 而 不 是 更 多 。 代 码 清单 12-15 展示 了 HTML 
wrapper 组 件 ， 我 们 将 把 组 件 和 Redux store 的 状态 传递 给 它 。 


代码 清单 12-15 ” 骨 入 Redux 状态 








应 用 程序 的 基本 元 数 
码 由 于 与 当前 讨论 无 关 而 被 省 略 
const ogProps = { 


updated time: new Date() ， 

type: ‘'website' 

rl "ttpss /soclal react en", 

title: 'Letters Social | React in Action by Mark Thomas from Manning 
Publicatiens', 

description: 

'Letters Social is a sample application for the React.]js book React in 
Action by Mark Thomas from Manning Publications. Get it today at 
https://ifelse.io/book' 

}; 
将 应 用 注入 主 div 中 ， 以 便当 React- 


export const start = () => 1 DOM 在 浏览 帮 病 接管 工作 时 ， 就 不 必 
return ‘<!DOCTYPE html><html lang="en-us"> 重 做 服务 器 做 过 的 工作 
<head> 


<link rel="stylesheet" href="/static/styles.css" type="text/css" /> 
<link rel="stylesheet" href="https://api.mapbox.com/mapbox. 
J 1 了 入 人 全 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
已 攻 站 下 本 所 区 
Letters Social | React in Action by Mark Thomas from Manning 
Publications 
<«/title> 
<link rel="manifest" href="/static/manifest.json" /> 
<meta name="viewport" content="width=device-width,initial-scale=1" /> 
<meta name="ROBOTS" content="INDEX, FOLLOW" /> 
<meta property="og:title" content="$ {ogProps.title}" /> 
<meta property="og:description" content="${ogProps.description}" /> 
<meta property="og:type”" content="$ {ogProps.type}" /> 
<meta property="og:url" content="$ {ogProps.url}" /> 
<meta property="og:updated time" content="$ {ogProps.updated time}" /> 
<meta itemProp="description" content="$ {ogProps.description}" /> 
<meta name="twitter:card" content="summary" /> 
<meta name="twitter:title" content="${ogProps.title}" /> 
<meta name="twitter:description" content="${ogProps.description}" /> 
<meta property="book:author" content="Mark Tielens Thomas" /> 
<meta property="book:tag" content="react" /> 
<meta property="book:tag" content="reactjs" /> 
<meta property="book:tag" content="React in Action" /> 
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<meta property="book:tag" content="javascript" /> 
<meta property="book:tag" content="single page application" /> 
<meta property="book:tag" content="Manning publications" /> 
<meta property="book:tag" content="Mark Thomas" /> 
<meta name="HandheldFriendly" content="True" /> 
<meta name="MobileOptimized" content="320" /> 
<meta name="theme-color" content="#4469af" /> 
< ni 
href="https://fonts.googleapis.com/css?family= 
Open+Sans:400,700,800" 
rel="stylesheet" 


/> 
</head> 
a Li 浏览 磊 中 的 Redux store 能 够 从 服务 
; 侯 停 止 的 地 方 接管 ， 因 此 以 JSON 
Fs 字符 串 格 式 化 的 形式 藤 入 store 
export const end = reduxState => { 
return “</div> 
<script id="ijnitialState"> 
window. INITIAL STATE = ${JSON.stringify(reduxState)}; 


</eeript> 
<SCript src="https://cdn ravenjs .com/3.17.0/ravern.min,.js" 
type="text/javascript"></script> 
<script srce="https://api .mapbox.com/mapbox.Js/v3.1.1/mapbox.Js" 
type="text/javascript"></script> 
<script src="/static/bundle.js" type="text/javascript"></script> 
</body> 
</html> » 
}; 


这 样 的 话 , 就 需要 修改 Redux store 以 便 它 可 以 接管 。 代码 清单 12-16 中 的 代码 主要 做 了 两 件 
事 : 确保 每 次 在 服务 器 上 从 头 开 始 创 建 Redux store( 以 防止 出 现 前 面 提 到 的 潜在 bug )， 并 教会 
它 从 DOM 读 取 初始 状态 。 代码 清单 12-16 展示 了 对 生产 store 所 做 的 这 些小 修改 (开发 版 本 不 是 
由 服务 天 泻 染 的 ， 因 此 没有 要 接管 的 初始 状态 )。 





代码 清单 12-16 ”为 SSR 修改 Redux store ( src/store/configureStore.prod.js ) 


RR 
let store; 
export default function configureStore (initialState) { 如 果 是 在 服务 器 上 , 则 希望 每 


if (store && !isServer()) 1 次 都 返回 一 个 新 的 store 
return store; 


} 
const hydratedState = 


IijsServer() && process.env.NODE ENV === 'production' 如 果 不 在 服务 右上 
? window. INITIAL STATE 且 应 用 又 处 于 生产 
initialSsState; 模式 ， 则 从 DOM 
store = createStorel 上 查找 状态 如 果 
rootReducer, ei 
hydratedState, 找到 就 用 它 


compose (applyMiddleware (thunk, crashReporting)) 
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站 
return store; 


} 


现在 store 将 能 够 从 服务 需 众 和信 的 数据 中 读 取 初始 状态 ， 而 不 必 重 复工 作 。 还 剩 下 什么 ? 你 
可 能 还 记得 在 本 和 草 开 头 服务 器 端 泻 染 有 可 用 的 异步 选项 。 目 前 使 用 的 是 React DOM 的 
renderToString 方法 , 但 它 是 同步 的 ， 如 果 很 多 用 户 同 时 访问 应 用 ， 这 可 能 会 成 为 服务 器 的 
瓶颈 。React 16 引入 了 一 个 用 于 服务 希 端 泻 染 的 异步 选项 , 我 们 将 在 这 里 使 用 它 。 除 了 用 Node.js 
的 streams 来 符 代 同步 方法 ， 用 滩地 本 相国 |。 


pe 12.2 Es 2 














ial 应 用 中 。 你 可 全 用 edi 进行 服 3 器 

的 (如 及 可 能 需要 进行 一 些 重 ， 
库 ， 他 们 可 以 帮助 解 
， 花 点 儿 时 间 看 看 这 
优化 的 ee 





a 
些 库 和 它们 的 源 代码 。 你 可 能 会 惊喜 地 发 现 ， 通 过 服务 器 端 学 
react-server ) 以 及 抽象 能 够 让 服务 器 端 泻 染 变 得 多 容易 如 Nextj je 


如 宁 以 前 使 用 过 Node.js， 那么 可 能 会 比较 熟悉 streams。 如 果 没 有 ， 也 没关系 。 Nodeiis Np 
Streams 是 处 理 流 数 据 的 抽象 接口 ， 包 括 读 或 写 文件 、 转 换 和 压缩 图 像 以 及 处 理 HTTP 请 求 和 响 
应 。 代 码 清 单 12-17 展示 了 如 何 利 用 React-DOM 的 新 API 





renderToNodeStream,。 













代码 清单 12-17” 异步 服务 器 端 泻 


染 ( server/server.js ) 





res.setHeader('Content-type', '‘'text/html'); 浏览 从 应 该 尽 可 能 快 地 开始 
res.write (HTML.start()); 加 载 页面 ,因此 先 把 应 用 的 第 
const renderStream = renderToNodeStreaml 一 部 分 发 送出 去 

<Provider store={store}> 

<RouterContext {...props} /> 

</Provider> 创建 一 个 用 于 应 用 党 染 的 流 
类 天 
人 和 全 人 i 

- / | 二 
res.write(HTML.end(store.getSstate())); 浏览 絮 上 ， 但 不 要 结 束 流 


res.end();} 


jy 当 流 触发 了 结束 事件 并 且 
泻 染 也 完成 了 , 发 送 剩 余 的 

号 入 Content-type 头 信息 ， 这 样 浏览 硕 就 可 以 知道 预期 的 内 容 类 型 HTML 并 结束 啊 应 

有 了 这 些 ，Letter Social 现在 就 完全 泻 染 给 用 户 了 。 使 用 开发 者 工具 检视 文档 加 载 过 程 并 查 
看 服务 冀 发 送 的 内 容 ， 就 可 以 直接 观察 到 这 一 点 了 ( 图 12-11 展示 了 与 你 看 到 的 内 容 类 似 的 画面 )。 
如 果 在 生产 模式 下 运行 应 用 ， 可 能 会 看 到 速度 上 的 差异 , 但 在 Chrome 或 Firefox 的 开发 者 工具 中 ， 
可 以 逐 帧 查看 应 用 程序 的 加 载 情况 。 你 会 看 到 服务 需 正在 发 送 一 个 完整 的 Web 页 面 ， 而 不 只 是 
在 应 用 程序 加 载 完 成 之 后 泻 染 。 
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pr 图 片 还 未 加 载 ， 但 它们 可 以 更 快 地 
如 果 没有 服务 器 端 泻 染 ， ee 
用 户 将 看 到 一 个 没有 内 容 初始 泻 染 包含 一 些 在 脚本 包 Ce 
的 灰色 屏幕 。 加 载 之 前 的 标记 。 已 们 对 应 的 宗 全 了。 


图 12-11 
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如 果 使 用 Chrome 开发 者 工具 检视 social.react.sh 的 Performance 选项 卡 ， 我 们 将 看 到 服务 器 
正在 发 送 已 被 完全 泻 染 的 HTML， 而 不 是 等 到 应 用 包 加 载 完 毕 后 才 开 始 演 染 应 用 


小 结 


在 本 章 中 , 我 们 讨论 了 如 何 将 服务 器 端 泻 染 功能 构建 到 应 用 中 。 正 如 我 们 看 到 的 , 它 可 能 涉 
及 应 用 的 很 多 方面 ， 包 括 路 由 、 数 据 获取 和 状态 管理 (Redux )。 


服务 器 端 泻 染 (SSR ) 是 在 服务 硕 上 为 发 送 到 客户 端的 UI 生成 静态 标记 。 使 用 React 的 
SSR 涉及 使 用 React-DOM 泻 染 React 在 客户 端 运行 时 可 以 复 用 的 HTML 字符 串 
( ReactDOM.renderToString() ) 或 者 使 用 React-DOM 演 染 在 浏览 右上 保持 静态 的 
静态 标记 (ReactDOM.renderToStaticMarkUp() )。 

并 不 是 所 有 的 JS 框架 和 库 都 被 构建 用 于 处 理 SSR, 但 React 是 , 它 可 以 “接管 ”在 服务 
船上 生成 的 标记 而 无 须 在 浏览 希 上 重新 泻 染 已 有 元 素 。 

使 用 像 React Router 这 样 的 路 由 解决 方案 可 以 让 开发 者 在 客户 端 和 服务 器 之 间 共 享 路 由 ， 
以 及 跨 平 台 共 享 一 些 代码 。 

SSR 的 实现 可 能 非常 复杂 并 且 只 在 某 些 情况 下 才 有 意义 ,这 些 情况 包括 : 当 特别 关 注 SEO 
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时 ， 当 应 用 程序 的 关键 路 径 需 要 较 短 的 白 屏 时 间 时 ,或 是 当 使 用 React 作为 静态 标记 生 
成 器 时 。 

国 通常 只 有 在 服务 器 发 送 的 页 面 有 效 负载 不 太 大 时 ，SSR 所 能 提供 的 性 能 收益 才 会 实现 (这 
样 就 不 会 比 之 前 花费 更 长 时 间 加 载 )。 更 长 的 啊 应 US 能 消除 原本 可 以 实 
现 的 较 短 的 白 屏 时 间 。 

国 SSR 要 求 开发 者 考虑 应 用 的 哪些 部 分 会 在 服务 器 上 运行 而 哪些 部 分 不 会 。 那 些 需要 浏览 
需 环 境 的 特性 需要 经 过 修补 才能 在 服务 器 上 工作 ， 或 者 应 该 对 这 些 特性 进行 处 理 以 便 不 
让 它们 在 服务 右上 运行 。 

国 通过 同步 客户 端 和 服务 需 之 间 的 身份 验证 状态 以 及 在 服务 器 上 做 必要 的 数据 获取 工作 来 
实现 服务 右上 的 “完整 ” 演 染 。 

加 ”尽管 有 其 他 的 JS 平台 实 现 , 但 SSR 实际 上 要 求 运 行 一 个 Node.js 服务 器 ,或 者 至 少 调用 
一 个 Node.js 服务 需 来 生成 HTML 发 送 给 客户 端 。 

在 下 一 章 中 ， 我 们 将 简要 地 看 看 React Native， 并 结束 我 们 学 习 React 基础 知识 的 旅程 。 
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React Native 介绍 





本 章 主要 内 容 

国 React Native 概述 

国 React 和 React Native 之 间 的 汪 丰 
加 了 解 更 多 React Native 的 方法 





至 此 ， 我 们 已 经 学 习 了 使 用 React 的 基础 知识 ， 实 现 了 路 由 右 ， 探 索 了 Redux， 了 解 了 
服务 硕 端 泻 染 ,甚至 过 渡 到 使 用 React Router。 还 有 什么 可 以 学 的 ?在 React 生态 和 社区 中 仍 
有 许多 值得 学 习 和 探索 的 地 方 。 本 章 将 从 更 高 的 层次 了 解 React Native React 生态 中 由 
Facebook 开发 的 男 一 个 项 目 。 使 用 React Native 可 以 编写 在 iOS 和 Android 这 样 的 手机 平台 
上 运行 的 React 应 用 程序 。 这 意味 着 可 以 编写 在 React Native 现在 或 未 来 目标 平台 (智能 手机 
或 其 他 任何 平台 ) 上 运行 的 应 用 程序 。 在 以 类 似 React 方式 构建 移动 应 用 时 ，React Native 提 
供 了 出 色 的 开发 体验 ,这 是 React Native 在 React 社区 中 变 得 越 来 越 重 要 和 越 来 越 流 行 的 主要 
原因 。 

由 于 React Native 和 移动 开发 涉及 的 领域 非常 广 ， 我 将 让 对 React Native 的 讨论 保持 简明 扼 
要 ， 并 主要 到 焦 在 高 层 概 念 上 。 在 本 章 结 束 时 ,读者 应 该 了 解 React Native 是 什么 以 及 为 什么 要 
使 用 它 ， 同 时 还 会 了 解 如 何 开 始 学 习 更 多 有 关 它 的 知识 。 





13.1 介绍 React Native 


在 React Native 出 现 之 前 ,创建 移动 应 用 程序 时 会 有 几 个 选择 。 可 以 使 用 iOS 和 Android 平台 
以 及 可 用 的 语言 ， 也 可 以 选择 一 种 可 用 的 hybrid 方法 。 虽 然 hybrid 的 实现 方式 各 不 相同 ， 但 它们 
通常 使 用 了 Web 视图 (可 以 认为 是 “移动 端 浏览 器 ”) 并 暴露 了 一 些 原生 SDK 的 接口 。 这 种 方法 
的 一 个 缺点 是 虽然 可 以 让 开发 者 编写 允许 使 用 许多 熟悉 的 Web API 和 风格 的 原生 应 用 程序 ， 但 应 
用 程序 并 不 是 “真正 的 原生 ”， 并 且 有 时 在 性 能 上 和 整体 感觉 上 会 有 明显 的 差异 。 好 处 是 没有 移动 
开发 经 验 的 团队 或 开发 人 员 也 可 以 使 用 Web 开发 相关 的 技能 并 能 够 创建 移动 端 应 用 程序 。 
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移动 开发 主题 以 及 平台 、 语言 和 人 硬件 如 何在 这 个 世界 扮演 不 同 的 角色 超出 了 本 书 的 范围 。 但 
hybrid 与 全 原生 方法 之 间 的 选择 与 React Native 的 讨论 相关 ， 因 为 React Native 提供 了 一 种 新 的 
可 选 方案 。 使 用 React Native 可 以 构建 “真正 原生 ”的 应 用 程序 ， 但 你 可 以 结合 使 用 JavaScript 
和 平台 特定 的 代码 (如 Swift 或 Java )。 

React Native 的 目标 是 ， 将 React 构建 用 户 界 面 的 风格 和 概念 融 到 移动 应 用 程序 的 开发 中 ， 
并 融合 移动 和 浏览 器 开发 的 最 佳 方 面 。 它 鼓励 跨 平台 共享 代码 ( 同时 针对 iOS 和 Android 设备 的 
组 件 )， 人 允许 在 合适 的 地 方 编写 原生 代码 ， 并 编译 成 原生 应 用 程序 同时 使 用 许多 与 React 类 
似 的 风格 。 

让 我 们 看 一 下 React Native 的 一 些 高 级 特性 。 

加 使 用 React Native， 可 以 编写 使 用 原生 代码 (Swift 或 Java ) 的 JavaScript 应 用 程序 并 编译 

成 运行 在 iOS 或 Android 上 的 原生 应 用 程序 。 

国 React Native 可 以 在 Android 和 ioOS 上 创建 相同 的 UI 元素， 潜在 地 简化 移动 应 用 程序 的 
开发 。 

图 开发 人 员 可 以 在 需要 时 添加 自己 的 原生 代码 ， 因 此 并 没有 限制 只 使 用 JavaScript。 

国 React Native 应 用 与 React 共享 习 语 ， 并 且 在 某 些 情况 下 提供 相同 的 组 件 驱 动 、 声 明 性 概 
念 以 及 API， 在 设计 UI 时 使 用 。 

国 ”用 于 构建 React Native 应 用 程序 的 开发 者 工具 允许 重新 加 载 更改 后 的 应 用 程序 而 无 须 等 
待 很 长 的 编译 周期 。 这 通常 可 以 节省 开发 人 员 的 时 间 并 带 来 更 愉快 的 体验 。 

国 共享 代码 和 针对 多 个 平台 的 能 力 有 时 可 以 减少 投 在 构建 特定 应 用 或 项 目的 工程 师 
数量 ; 也 可 以 减少 维护 的 代码 库 ， 让 工程 师 可 以 更 轻松 地 在 Web 和 原生 平台 之 间 
切换 。 : 

图 ”可 以 将 React Web 应 用 的 逻辑 和 其 他 方面 与 React Native 应 用 共享 ， 如 业务 人 逻辑 ,其 至 茶 
些 情况 下 的 样式 。 

React Native 如 何 工 作 ? 它 可 能 看 起 来 像 是 某 种 神秘 的 黑 盒子 一 一 接收 JavaScript 并 输出 编 

译 后 的 原生 应 用 。 要 使 用 它 ， 并 不 需要 了 解 React Native 的 每 个 部 分 如 何 工 作 ， 就 像 不 需要 知道 
React-DOM 的 细节 也 可 以 编写 出 色 的 React 应 用 程序 一 样 。 但 对 正在 使 用 的 技术 至 少 有 个 有 效 的 
了 解 往 往 是 有 帮助 的 。 

使 用 React Native 可 以 创建 混合 JavaScript 和 原生 代码 的 应 用 程序 。React Native 通过 在 应 用 
程序 和 底层 移动 平台 之 间 创 建 某 种 桥梁 来 使 之 成 为 可 能 。 大 多 数 移动 设备 都 可 以 执行 JavaScript， 
React Native 正 是 利用 这 一 点 来 运行 JavaScript。 当 JavaScript 与 任何 原生 代码 一 起 执行 时 ，React 
Native 的 桥接 系统 使 用 React 核心 库 和 其 他 库 将 组 件 的 层次 结构 (包括 事件 处 理 、 状 态 、 属 性 
和 样式 ) 转换 为 移动 设备 上 的 视图 。 

当 发 生 更 新 〈( 例 如， 用户 按 下 按钮 ) 时 ，React Native 将 原生 事件 〈 按 下 、 摇 动 、 地 理 定 位 
事件 或 其 他 任何 事件 ) 转化 为 JavaScript 或 原生 代码 可 以 处 理 的 事件 ， 它 还 根据 状态 或 属性 的 更 
改 来 泻 染 适当 的 UI。React Native 还 会 打包 所 有 代码 并 进行 必要 的 编译 ， 以 便 可 以 将 应 用 程序 发 
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布 到 苹果 应 用 商店 或 谷歌 的 Play Store。 

天 于 这 些 过 程 以 及 React Native 的 工作 方式 还 有 很 多 东西 ， 但 是 在 设备 上 运行 的 JavaScript 
与 原生 平台 API 和 事件 之 间 进 行 转换 的 基本 过 程 就 是 React Native“ 魔 力 ”发 生 的 地 方 。 结 
果 是 一 个 不 但 可 以 使 用 而 且 在 性 和 BE 方面 没有 打折 扣 的 平台 。 这 是 以 前 移动 应 用 hybrid 方法 所 
面 对 问 题 的 一 个 很 好 的 折 中 ， 而 且 这 也 避免 了 传统 移动 开发 的 一 些 痛 点 。 图 13-1 说 明了 其 工 
作 原 理 的 概览 。 


开发 环境 和 工具 原生 下 各 4 (iOS、 让 


| 6s: 和 动 沁 
桥接 接口 使 用 了 平台 的 | 和 
Swift、 


in 引 敬 和 原生 API 
Objective-C、 来 自 或 发 送 给 原生 平 i 二 














App Store、 
Play Store 

















Java 等 台 的 命令 、 事 件 〈 绘 
制 、 更 新 、 视 图 、 创 
建 视图 等 ) 






13-1 React Native 通过 在 JavaScript 和 底层 原生 平台 之 间 创 建 桥接 的 方式 来 工作 。 大 多 数 原生 
平台 实现 了 JavaScript 虚拟 机 或 其 他 原生 运行 JavaScript 的 方式 。 该 桥接 方式 支持 运行 应 用 
程序 的 JavaScript。React Native 桥接 系统 将 在 底层 平台 和 JavaScript 之 间 传 递 消息 ， 
以 便 将 原生 事件 转换 为 React 组 件 可 以 理解 和 响应 的 事件 


这 听 起 来 与 本 书 所 学 的 React 有 所 不 同 ， 在 很 多 方面 确实 如 此 。 但 比 差异 更 重要 的 是 相似 之 
处 。 我 将 在 下 一 节 介 绍 更 多 内 容 , 可 以 查看 代码 清单 13-1 中 的 代码 ,看 看 React Native 组 件 与 目 
前 使 用 的 组 件 有 多 少 相 似 之 处 。 

尽管 我 在 本 章 中 没有 介绍 如 何 搭建 React Native 项 目 , 但 仍然 可 以 看 出 代码 清单 13-1 中 的 代 
码 所 做 的 工作 。 你 可 以 用 手机 扫描 二 维 码 来 查看 React Native 练习 应 用 。 这 是 尝试 React Native 
的 一 个 很 好 的 方式 ， 无 须 进 行 任何 搭建 或 配置 。 

可 能 会 注意 到 一 件 重 要 的 事情 ， 组 件 的 元 素 ( View 、Text ) 类 似 于 前 面 几 章 组 件 中 的 div 
和 span 元 素 。 这 是 宽泛 的 React 概念 路 平台 存在 的 例子 。 组 件 的 各 个 元 素 是 什么 并 不 重要 ， 重 
要 的 是 可 以 复 用 以 及 组 合 它们 ， 如 代码 清单 13-1 所 示 。 


代码 清单 13-1 ” React Native 示例 组 件 





第 规 的 React.Component 
import React, { Component } from 'react',; 
import { Text, View } from ‘react-native',; 


React Native 内 置 了 构建 移 


的 Keest Camparent | 
动 应 用 的 基本 要 素 
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export default class WhyReactNativelsSoGreat extends Component { 


render () { 可 以 使 用 React Native 组 合 组 件 , 这 里 的 view 组 件 
return ( | 就 像 浏览 器 中 的 div 标签 ( 常用 布局 组 件 ) Text 更 像 是 浏览 器 
<View> 中 的 span 标签 
<Text> 
If You like React on the web, you'll like React Native. 
</Text> 
<Text> 
You just use native components like '‘'View' and "Text ' ， 
instead of web components like 'div' and 'span'. 
</Text> 
</View> 


} 


还 有 一 些 别 的 像 React VR 这 样 的 项 目 , 其 关注 点 与 你 使 用 的 Web UI 更 加 不 同 , 但 却 使 用 了 
相同 的 模式 和 概念 。 这 是 React 平台 最 强大 的 方面 之 一 ， 在 路 平台 时 尤为 明显 。 


13.2 React 和 ReactNative 


React 和 React Native 有 多 相似 ? 除 共 享 名 称 之 外 ， 它 们 都 使 用 了 React 核心 库 ， 但 针对 的 
是 不 同 的 平台 (浏览 器 和 移动 设备 )。 本 节 将 简要 介绍 React 和 React Native 的 一 些 异 同 之 处 。 让 
我 们 比较 一 下 React 和 React Native 的 一 些 重要 方面 。 

图 运行 时 一 一 React 和 React Native 针对 的 是 不 同 的 平台 。React 针对 浏览 希 ， 因 此 痢 重 于 

使 用 浏览 需 特 定 的 API。 你 可 以 在 每 个 API 中 看 到 这 方面 的 一 些 结 果 。 例 如 ，class、ID 
以 及 其 他 属性 在 基于 Web 的 React 组 件 中 很 常见 。 原 生平 台 使 用 不 同 的 布局 和 样式 语义 ， 
因此 在 React Native 组 件 上 不 会 看 到 太 多 这 样 的 属性 。 基 于 浏览 需 的 应 用 和 移动 端的 应 
用 还 在 不 同类 型 的 设备 上 运行 , 因此 , 在 考虑 React 和 React Native 时 , 不 应 该 忽视 线程 、 
CPU 利用 率 以 及 底层 技术 的 其 他 差异 等 。 

图 ”核心 API 一 一 许多 React 特定 的 API(〈 如 在 组 件 生命 周期 、 状 态 、 属 性 等 中 使 用 的 API ) 
在 React 和 React Native 中 是 相似 的 。 但 每 个 平台 为 网 络 、 布 局 、 地 理 定位 、 资 源 管理 、 
持久 化 、 事 件 和 其 他 重要 领域 实现 了 不 同 的 API。React Native 旨 在 从 面向 浏览 絮 的 世界 
引入 一 些 熟 悉 的 API， 像 用 于 网 络 的 Fetch API 和 用 于 布局 的 Flexbox API。React Native 
也 会 骏 露 事件 ， 但 它们 针对 的 更 多 是 移动 平台 (如 OnPress )。 这 些 差异 可 能 是 一 个 小 
的 障碍 ， 但 幸运 的 是 ， 有 些 库 可 以 帮助 消除 Web 和 原生 API 之 间 的 差异 ， 如 react- 
primitives,。 

图 组 件 一 一 基于 Web 的 React 项 目 没有 有 “内置 ”组 件 (例如 ， 用 于 图 片 、 文 本 布局 或 其 他 

UI 元素 )。 开 发 人 员 需 要 自己 创建 这 些 组 件 。 相 对 地 ，React Native 包含 了 用 于 文本 、 视 
图 、 图 片 等 的 组 件 。 这 些 是 为 移动 应 用 创建 UI 时 所 需 的 基本 类 型 ,类 似 于 浏览 器 环境 的 
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DOM 元 素 。 

React 核心 库 的 使 用 React 和 React Native 都 使 用 React 核心 库 进 行 组 件 定 义 。 每 
个 项 目 使 用 不 同 的 泻 染 系统 将 所 有 内 容 连 接 在 一 起 并 与 设备 (浏览 句 或 移动 设备 ) 进行 
交互 。 用 于 Web 的 React 使 用 react-dom 库 ， 而 React Native 实现 了 自己 的 系统 。 这 
种 做 法 让 使 用 者 能 够 用 类 似 的 方式 跨 平台 地 编写 组 件 。 

生命 周期 方法 React Native 组 件 也 具有 生命 周期 方法 ， 因 为 它们 继承 目 相 同 的 React 
基 类 ， 并 目 这 些 方法 由 平台 特定 的 系统 ( React-DOM 或 React Native ) 处 理 。 

事件 类 型 一 一 React-DOM 实现 了 一 个 综合 事件 系统 ， 它 允许 组 件 以 标准 的 方式 处 理 浏 览 
器 事件 ， 移 动 应 用 程序 暴露 了 其 他 事件 。 一 个 例子 是 手势 。 使 用 者 可 以 用 手势 在 触摸 设 
备 上 进行 平移 、 缩 放 、 拖 动 等 更 多 操作 。 用 React Native 组 件 编写 的 组 件 允 许 啊 应 这 些 
事件 。 

样式 由 于 React Native 并 不 针对 浏览 锅 ， 因 此 需要 以 稍微 不 同 的 方式 设计 组 件 的 样 
式 。 常 规 的 移动 开发 中 没有 CSS API, 但 可 以 将 大 多 数 CSS 属性 用 于 React Native。React 
Native 提供 了 特定 的 API， 但 属性 之 间 不 可 能 做 到 一 一 对 应 。 以 CSS 动画 为 例 。CSS 规 
范 和 浏览 器 实现 它 的 方式 与 iOS 和 Android 文 持 和 实现 动画 的 方式 不 同 ， 因 此 需要 以 不 
同 的 方式 制作 动画 并 为 每 个 平台 使 用 正确 的 API。 学 习 用 于 样式 的 新 API 需要 花费 时 间 
并 且 会 阻碍 在 Web 和 原生 项 目 之 间 直 接 共 享 CSS 样式 。 然而, 值得 庆幸 的 是 ， 有 些 库 可 
以 处 理 React 和 React Native， 如 styled-components。 随 着 React Native 日 益 普 

我 们 应 该 会 看 到 更 多 这 样 的 跨 平 台 库 被 开发 出 来 。 

第 三 方 依 赖 项 与 React 一 样 , 仍然 可 以 将 第 三 方 组 件 库 用 于 React Native。 许 多 流 
行 的 库 (如 React Router 和 styled-components ) 甚至 包括 针对 React Native 的 变 
种 (如 前 所 述 )。React Native 最 吸引 人 的 一 个 方面 是 它 仍 然 可 以 利用 JavaScript 模块 生 

















分 发 一 一 虽然 可 以 将 React 应 用 程序 部 署 到 几乎 任何 现代 浏览 硕 中 , 但 React Native 应 用 
程序 需要 平台 特定 的 分 发 工具 来 进行 开发 和 最 终 发 布 ( 如 Xcode )。 通 常 需要 使 用 React 
Native 构建 过 程 来 编译 应 用 程序 以 进行 最 终 上 传 。iOS 和 Android 工具 的 “walled garden” 
性 质 是 开发 移动 应 用 程序 的 众所周知 的 权衡 。 

开发 工具 一 一 针对 Web 的 React 运行 在 浏览 右 中 ， 因 此 可 以 得 益 于 任何 浏览 硕 特 定 的 工 
具 来 辅助 调试 和 开发 。 对 于 React Native, 并 不 需要 有 平台 特定 的 工具 , 但 工具 仍然 有 用 。 
项 目 间 的 一 个 关键 区 别 是 React Native 专注 于 热 加 载 ， 而 默认 情况 下 这 并 不 属于 React。 
热 加 载 可 以 加 速 移动 开发 ， 因 为 不 必 等 待 应 用 程序 编译 。 图 13-2 展示 了 使 用 React Native 
时 可 以 访问 的 一 些 开 发 者 工具 的 示例 。 
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Reload 


Debug JS Remotely 
Enable live Reload 
Start Systrace 
Enable Hot Reloading 
Show INspector 


Show Peff Monitor 





Cancel 


13-2 ”React Native 附带 了 许多 有 助 于 性 能 、 调 试 和 其 他 功能 的 开发 者 工具 。 这 些 工具 还 意味 着 ， 尽 管 仍然 
可 以 使 用 平台 特定 的 工具 进行 开发 ， 但 开发 者 对 Xcode 这 类 开发 工具 的 严格 依赖 降低 了 。 虽 然 有 很 多 原因 ， 但 
React Native 提供 的 出 色 的 开发 人 员 体 验 似乎 是 它 作 为 一 项 技术 被 普遍 接受 的 一 个 原因 


13.3 何 时 使 用 React Native 


并 不 是 每 个 开发 人 员 或 团队 都 需要 React Native。 让 我 们 想象 几 个 可 能 会 遇 到 的 场景 ， 看 看 
React Native 是 否 是 应 该 考虑 的 东西 。 

国 独立 开发 者 一 一 如 果 你 第 一 次 学 习 React 或 者 只 是 将 它 用 于 辅助 项 目 ， 学 习 React Native 
可 能 是 因为 乐趣 ,或 者 是 因为 从 事 移动 项 目 开 发 。 如 果 没 有 深厚 的 原生 开发 经 验 但 想 要 轻 
松 地 使 用 它 或 拥有 更 直接 的 应 用 程序 ， 那 么 React Native 也 是 个 不 错 的 考虑 对 象 。 如 果 已 
经 了 解 React， 那 么 利用 一 些 熟悉 的 概念 来 使 用 React Native 进行 移动 开发 是 有 意义 的 。 

图 小 型 跨 职 能 团队 一 一 小 型 创业 公司 通常 处 于 这 样 的 位 置 : 工程 师 将 在 广泛 的 技术 栈 中 工作 ， 
从 服务 器 到 客户 端 应 用 程序 ( Web、 移 动 或 其 他 )。 这 种 情况 下 ，React Native 有 时 可 以 让 那 
些 组 织 中 和 号 兼 多 职 的 工程 师 在 没有 丰 宦 移动 开发 经 验 的 情况 下 进行 移动 应 用 开发 并 让 他 们 
的 React 技术 能 力 得 以 延续 。 这 也 适用 于 想 要 在 应 用 或 项 目 间 轻松 调动 工程 师 的 大 型 组 织 。 

图 具有 很 少 或 者 中 等 原生 开发 经 验 的 团队 一 一 如 果 开 发 者 或 团队 只 有 很 少 或 中 等 移动 开发 
经 验 ， 但 熟悉 React 和 JavaScript， 那 么 React Native 可 以 更 容易 地 将 产品 快速 地 整合 起 
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来 。 经 验 无 可 替代 ， 但 无 须 全 部 使 用 Swift (ioOS ) 或 Java(Android ) 可 能 会 节省 时 间 。 

图 拥有 深厚 的 原生 开发 经 验 的 团队 一 一 有 些 团队 之 所 以 选择 React Native, 并 不 是 因为 它 在 
某 些 方面 降低 了 移动 开发 的 门槛 ， 而 是 因为 它 有 助 于 在 业务 应 用 (移动 和 桌面 ) 的 各 种 
实现 中 使 习惯 用 法 和 模式 标准 化 。 但 是 ， 如 果 这 不 是 一 个 问题 而 且 你 已 经 在 移动 开发 上 
拥有 丰富 的 经 验 并 投入 了 大 量 时 间 ， 那 么 React Native 可 能 需要 进行 更 仔细 的 评估 ， 以 
确定 团队 是 否 会 从 可 用 的 抽象 和 模式 中 受益 。 

当 考虑 React Native 时 ， 除 了 要 考虑 团队 和 专业 知识 ， 还 应 该 意识 到 现 有 技术 固有 的 一 些 限制 。 

图 ”JavaScript 的 使 用 一 一 如 果 团 队 或 组 织 没 有 任何 专注 于 JavaScript 的 开发 人 员 或 者 已 经 具 
有 丰富 的 移动 开发 经 验 , 那么 将 工程 师 转 到 JavaScript 和 以 JavaScript 为 中 心 的 生态 可 能 
没有 什么 意义 ， 这 没 问题 。 像 用 于 Web 的 React 一 样 ，React Native 不 是 银 弹 ,应 该 根据 
权衡 利 商 进 行 评估 ， 而 不 是 根据 围绕 着 它 的 炒作 进行 评估 。 

图 特定 的 性 能 需求 一 一 React Native 是 高 性 能 的 ， 但 作为 一 种 抽象 事物 ， 它 可 能 对 开发 者 或 团 
队 要 达成 的 特定 性 能 的 目标 造成 另 一 个 障碍 。 例 如 ， 如 果 应 用 的 主要 目标 是 演 染 3D 场景 ， 
那么 React Native 可 能 不 是 最 合适 的 ， 其 他 框架 (如 Unity ) 可 能 更 适合 。 这 与 我 刚刚 提 到 的 
“React 不 是 银 弹 ” 的 想法 相 契 合 ， 而 且 我 已 经 党 试 在 前 面 几 章 中 坚持 这 个 观点 。 

图 ”高度 专 业 化 的 应 用 程序 一 一 有 些 应 用 程序 的 类 型 不 太 适 合 React 模型 。 增 强 现 实 〈《AR )、 
图 形 密集 型 或 其 他 高 度 专业 化 的 应 用 程序 通常 需要 特定 的 库 和 大 多 数 Web 工程 师 不 具备 
的 技能 。 这 并 不 是 说 不 能 用 React Native 来 完成 工作 , 但 到 目前 为 止 React Native 并 未 专 

图 ”内 部 应 用 一 一 有 时 ， 大 公司 会 开发 内 部 使 用 的 应 用 来 帮助 员工 以 各 种 方式 更 好 地 完成 工 
作 。React Native 非常 适合 这 类 应 用 程序 ， 因 为 这 些 应 用 程序 的 UI 通常 相对 人 简单 而 且 可 
以 由 不 擅长 移动 开发 的 工程 师 快 速 迭代 。 

当然 , 一 项 技术 是 否 对 使 用 者 的 使 用 场景 有 意义 最 终 要 由 使 用 者 和 团队 评估 , 但 希望 谈 者 现 

在 能 够 更 好 地 了 解 使 用 React Native 的 时 机 。 
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虽然 我 不 会 介绍 如 何 将 React Native 与 Letters Social 集成 , 但 本 节 还 是 会 花 点 时 间 介 绍 一 个 基本 
的 “Hello World” 示 例 ， 以 便 可 以 看 到 React Native 的 实际 效果 。 我 们 将 在 Letters Social 的 代码 仓库 
之 外 工作 , 因此 请 随意 将 应 用 代码 放 在 任何 想 要 跟踪 的 地 方 。 运行 代码 清单 13-2 中 的 命令 即 可 开始 。 





代码 清单 13-2 安装 create-react-native-app 


cd ./path-to-your-react-natijve-sample-folder 
npm install -9 create-react-native-app 


create-react-native-app . 
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运行 完 这 些 命令 后 , 应 该 能 够 看 到 在 所 选 的 目录 中 创建 了 许多 文件 以 及 一 些 指令 。 这些 命令 
与 Create React App (一 个 专注 于 Web 平台 的 React.js 的 类 似 的 项 目 ) 中 的 命令 类 似 。 图 13-3 显 
示 了 当 开 始 使 用 Create React Native App 库 时 应 该 看 到 的 内 容 。 


~/Code/oss/letters-native 
八 yarn start 
A Sart VE. 


O60: 16:28: Starting A . 
Packager started! 


To view your app with live reloading, point the Expo app to this QR code. 
You'll find the OR scanner on the Projects tab of the app. 





Or enter this address in the Expo app's search bar: 


Your phone will need to be on the same local network as this Como, 
For links to install the Expo app, please visit 


Logs from serving your app will appear here. Press Ctrl+C at any time to stop. 


4 
二 


人 


, OF R to restz ) 
i tC Og le a DMmen1 Ou Urrent MOoOue: developme nt 


图 13-3” 当 在 开发 模式 下 启动 应 用 程序 时 ， 应 该 会 看 到 React Native 打包 程序 启动 并 看 到 类 似 此 处 所 示 的 消 
息 。 按 照 指 示 确 保 在 本 地 计算 机 上 设置 了 Expo XDE。 根 据 所 选 的 目标 环境 ， 打 开 Android 或 iOS 模拟 器 
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Create React Native App 工具 安装 了 一 些 依赖 项 ， 创 建 了 一 些 样板 文件 ， 设 置 了 构建 过 程 ， 
并 将 Expo React Native 工具 包 集 成 到 项 目 中 。Expo SDK 扩展 了 React Native 的 功能 ， 使 处 理 便 
件 技 术 变 得 更 加 容易 。Expo XDE 开发 环境 使 管理 多 个 React Native 项 目 变 得 容易 ， 也 让 构建 和 
部 署 变 得 轻松 。 

你 不 会 构建 任何 实质 性 的 东西 ， 但 可 以 思考 并 体验 一 下 使 用 React Native 开始 构建 应 用 程序 
是 多 么 容易 。 一 旦 使 用 yarn start 运行 React Native 打包 需 ， 打 开 其 中 一 个 模拟 顺 ( Android 
或 iOS )， 就 可 以 看 到 正在 运行 的 应 用 程序 。 蔡 换 掉 一 些 样 板 代码 就 能 看 到 热 加 载 的 发 生 。 代 码 
清单 13-3 展示 了 一 个 简单 的 组 件 ， 它 在 挂 载 后 会 从 星球 大 战 API 获取 一 些 数据 。 请 注意 ，React 
Native 已 经 使 用 了 Flexbox 和 Fetch 这 样 的 现代 Web APT 在 前 面 几 间 中 使 用 了 Fetch 的 polyfill )。 


代码 清单 13-3 ”简单 的 React Native 示例 ( App.js ) 





import React from ‘react'; 
import { StyleSheet, Text, View } from 'react-native'; 


ER - 不 像 React,React Native 
臣 A 下 R 本 
expor efau ass App extends Reac omponent { 为 UI 提供 了 基础 组 件 
ConstEuUctortprops) { 
super (props); 
this.state = f 


2 二 心太 ， 
wo 构造 函 数 、 状 态 初始 化 以 及 
2 生命 周期 方法 在 React 和 
} React Native 中 是 一 样 的 
async componentDidMount() { 
en pi = er pan Ar 也 可 以 在 React Native 
cons results = await res.jso 
this.setState(() => { 应 用 程序 中 使 用 像 
return { async/await 这 样 的 现 
people: results 代 JavaScript 特性 
}; 
} ) ; 
} 即使 样式 与 在 React Native 
render () { 中 看 起 来 比较 相似 ， 但 这 
return ( 里 不 是 在 使 用 CSS 


<View style={styles.container}> 
<Text Style={{ .color: “FEcd433 fontSize: 40, padding: 10 }}> 
A long time ago, in a Galaxy far, far away... 


dd JSX 表达 式 在 React Native 
<Text>Here are some cool people:</Text> 
{this.state.people.map(p => { 和 React 中 是 一 样 的 
return ( 
<Text style={{ color: ‘'#fcd433' }} key={p.name}> 
{p.name)} 
</Text> 
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const styles = StyleSheet.create (| 


container: 1 在 React Native 中 创建 样式 表 需 要 
escx 1 使 用 它 的 Stylesheet API 对 组 件 进 
backgroundColor: '#000", 行 样 式 设置 


alignItems: 'center', 
JustifyContent: ‘center' 


} 
} 
如 果 对 应 用 进行 了 更 改 , 应 该 会 看 到 打包 需 实 时 啊 ee -在 运行 的 应 用 程序 , 如 图 13-4 
所 示 。 我 希望 这 能 让 你 了 解 在 React Native 中 构建 应 用 程 ) 么 容易 。 你 可 能 习惯 于 在 Web 上 
进行 热 加 载 ， 但 对 移动 开发 来 说 ， 编 译 -检查 - ei 会 占用 大 量 时 间 。 


wlelale dna:le lo) 
a Galaxy far, far 
aWwWay.. 


Luke Skywalker 
C-3PO 
R2-D2 

Darth Vader 
Lela Organa 
Owen Lars 
Beru Whitesun 人 
RS: ,D4 
Biggs Darklighter 
Obi-Wan Kenobi 





图 13-4 ”应 该 能 够 看 到 修改 在 运行 应 用 程序 代码 的 模拟 器 中 立即 得 到 反映 


至 此 , 已 经 创建 了 第 一 个 React Native 组 件 ， 并 给 出 了 相关 的 代码 ， 这 可 以 让 你 简要 了 解 该 
技术 的 工作 原理 以 及 使 用 起 来 有 多 容 匈 。 
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13.5 下 一 站 


在 React 文档 、 库 生态 及 社区 中 你 会 看 到 的 短语 之 一 是 “一 次 学 习 ， 到 处 编写 ”( learn once， 
write anywhere )。 这 是 对 Java 社区 中 流行 的 “一 次 编写 ， 到 处 运行 ”( leamn once，run anywhere ) 
这 个 短语 的 一 种 人 致 谷 ,这 也 是 React 范例 的 标志 之 一 。 正 如 我 们 在 本 章 中 所 看 到 的 ， 你 可 以 学 习 
React 概念 并 将 其 应 用 于 各 种 平台 (从 Web 到 移动 再 到 VR )。 每 当 学 习 如 何在 新 平台 上 使 用 
React 时 ， 和 都 会 有 平台 特定 的 差异 和 细微 差别 ， 但 大 部 分 React 知识 都 可 以 轻松 转换 。 这 就 是 使 
用 React 如 此 令 人 愉快 原因 之 一 。 

如 果 想 继续 学 习 React Native， 有 很 多 资源 可 供 查 看 。 一 个 是 Nader Dabit 的 React Native in 
Action， 如 图 13-5 所 示 ， 它 可 以 与 本 书 很 好 地 搭配 起 来 使 用 ， 因 为 它 让 你 从 学 完 React 后 继续 学 
习 ， 并 对 React Native 做 了 一 个 极 好 的 介绍 。 你 运用 到 目前 为 止 从 本 书 中 习 得 的 知识 ， 并 借助 这 
个 势头 投身 于 使 用 React Native 构建 移动 应 用 程序 。 如 果 团 队 正 在 考虑 将 React Native 用 于 接 下 
来 的 项 目 ， 那 么 它 也 是 一 个 很 好 的 资源 。 


Tr FE ST 
10 ADDS WEA Leva OID 





图 13-5 Nader Dabit 的 React Native in Action 为 IOS、Android 和 Web 开发 人 员 提 供 了 构建 强大 、 复 杂 
的 React Native 应 用 程序 所 需 的 技能 。 如 果 你 仍然 对 React 感到 好 奇 ， 那 么 它 是 接 下 来 的 最 佳 选择 


让 你 开始 使 用 React Native 的 另 一 个 好 资源 是 Create React Native App 项 目 。Create React 
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Native App 为 新 React Native 项 目 提 供 了 一 个 很 好 的 起 点 ， 并 为 刚 开始 使 用 React Native 的 人 提 
供 了 一 个 很 好 的 示例 应 用 。 它 包含 一 些 用 于 构建 React Native 应 用 程序 的 预 设 库 和 工具 ,但 允许 
“ 纯 去 ”并 重 置 为 默认 值 , 如 果 对 Create React App 或 Create React Native App 感 兴趣 , 请 在 GitHub 
上 查看 Create React Native App、Create React App 和 React Native 文档 。 


13.6 


小 结 


回顾 一 下 本 章 学 到 的 内 容 。 


React Native 是 React 生态 中 的 一 项 技术 ， 开 发 人 员 可 以 使 用 该 技术 编写 在 移动 iOS 和 
Android 设备 上 运行 的 React 应 用 程序 。 

React Native 使 用 React 核心 库 来 创建 组 件 ， 但 使 用 不 同 的 库 处 理 原 生平 台 上 应 用 程序 
的 泻 染 以 及 处 理 与 底层 平台 的 交互 (触摸 事件 、 地 理 位 置 、 摄 像 头 访问 等 )。 

React Native 处 理 JavaScript 与 底层 移动 平台 的 桥接 。 

React Native 使 用 许多 与 Web API 相同 或 相似 的 API。 它 使 用 Flexbox 进行 布局 ,使 用 Fetch 
处 理 网 络 请 求 ， 并 且 使 用 其 他 常见 的 API。 

在 构建 React Native 应 用 程序 时 ， 可 以 混合 JavaScript 和 原生 代码 。 

React Native 为 开发 和 编译 应 用 提供 了 一 组 强大 的 工具 。 

React Native 的 热 加 载 开发 工具 通过 不 让 使 用 者 每 次 等 待 应 用 程序 重新 编译 来 节省 时 间 。 

使 用 React Native 可 以 帮助 使 用 者 或 团队 降低 移动 开发 的 门槛 。 

不 要 想 将 React Native 用 于 所 有 类 型 的 移动 应 用 程序 ， 但 是 对 大 多 数 典 型 的 移动 应 用 来 
说 它 应 该 足够 了 。 时 

Nader Dabit 的 React Native in Action 是 React 旅程 中 下 一 个 值得 考虑 的 好 资源 。 


